Das Open Source Media Framework kann Medienelemente nicht einfach nur Abspielen, sondern deckt auch komplexere Anforderungen ab. Möchte man mehrere Videos, Grafiken oder SWFs gleichzeitig in verschiedenen Bereichen des Bildschirms abspielen, kann dies mit der Klasse RegionGateway
erledigt werden.
Anwendungsbeispiele könnte z.B. die parallele Werbeeinblendung während eines Videos, eine Picture-in-Picture-Funktion oder das Zeigen der Powerpointpräsentation während einer Konferenzübertragung sein.
Eine beispielhafte Implementierung mit drei verschiedenen Region habe ich hier erstellt: Beispiel anschauen (Quellcode am Ende des Artikels). Es wird ein Hauptvideo und ein kleines Video links oben abgespielt. Die rechte Region bleibt leer, hier könnte z.B. ein Banner (Skyscraper) eingefügt werden. Die Hintergründe sind extra eingefärbt, damit man die Regionen gut erkennen kann.
Was ist ein RegionGateway?
Das RegionGateway
ist ein DisplayObject
und kann auf der Bühne platziert und angezeigt werden. Ein Gateway kann beim Abspielen als “Darstellungsfläche” für den Mediaplayer dienen.
Im folgenden Codebeispiel werden drei Gateways erstellt. Die mainRegion
, die wiederum eine linke und ein rechte Region beinhaltet. Mehrere RegionGateways
können nämlich ineinander verschachtelt werden (z.B. mainRegion.addChildRegion(leftChildRegion)
).
Jedem MediaElement ein Gateway zuweisen
Jetzt kann man beim Erstellen eines Objekts vom Typ VideoElement
entscheiden, auf welchem dieses RegionGateways das Video ausgegeben wird. Hierzu setzt man die Eigenschaft gateway
auf das entsprechende Gateway, z.B. vidElement.gateway = mainRegion
.
Selbstverständlich funktioniert dies auch mit anderen Medientypen (z.B. Bildern, SWF, etc.).
ParallelElement
Damit im Beispiel zwei Videos gleichzeitig angezeigt werden, benötigt man eine Komposition. Hier ist ParallelElement
die richtige Wahl, da man damit verschiedenen Medienelemente zur gleichen Zeit abspielen kann.
Die beiden Objekte vom Typ VideoElement
werden deshalb in ein ParallelElement
gesteckt, das mit dem MediaPlayer
abgespielt wird.
LayoutUtils
In diesem Beispiel wird auch deutlich, dass das OSMF Hilfsmittel zum Layouten bietet. Die Region können mittels der Klasse LayoutUtils
über absolut oder prozentuale Werte positioniert werden. Dazu gibt es Methoden wie setAnchorLayout
, setAbsoluteLayout
oder setRelativeLayout
.
Auch die Videos lassen sich innerhalb ihrer Region über verschiedene ScaleModes (z.B. Letterbox, None) unterschiedlich ausgeben.
Quellcode3>
Actionscript:
-
span style="color: #808080; font-style: italic;">/**
-
* @author flo
-
*/// set width and height to 100 per cent
-
// display as a centered letterbox
-
// wire video element with region
-
// add both videos to a parallel composition
-
// play composition
-
// color and alpha
-
// set to 640x480 pixels
-
// color and alpha
-
// left=10, top=10, right=flexible, bottom=10
-
// width=100 pixels, height=250
-
// color and alpha
-
// left=flexible, top=10, right=10, bottom=10
-
// width=100 pixels, height=flexible
-
"http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv""rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"
-
span style="color: #808080; font-style: italic;">/**
-
* @author flo
-
*/// set width and height to 100 per cent
-
// display as a centered letterbox
-
// wire video element with region
-
// add both videos to a parallel composition
-
// play composition
-
// color and alpha
-
// set to 640x480 pixels
-
// color and alpha
-
// left=10, top=10, right=flexible, bottom=10
-
// width=100 pixels, height=250
-
// color and alpha
-
// left=flexible, top=10, right=10, bottom=10
-
// width=100 pixels, height=flexible
-
"http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv""rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short"
Schreibe einen Kommentar