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.
Quellcode
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