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

PLAIN TEXT

Actionscript:

1. package {
2.     import org.osmf.utils.FMSURL;
3.     import org.osmf.layout.RegistrationPoint;
4.     import org.osmf.display.ScaleMode;
5.     import org.osmf.utils.URL;
6.     import org.osmf.media.URLResource;
7.     import org.osmf.net.NetLoader;
8.     import org.osmf.video.VideoElement;
9.     import org.osmf.composition.ParallelElement;
10.     import org.osmf.gateways.RegionGateway;
11.     import org.osmf.layout.LayoutUtils;
12.     import org.osmf.media.MediaPlayer;
13.  
14.     import flash.display.Sprite;
15.     import flash.display.StageAlign;
16.     import flash.display.StageScaleMode;
17.  
18.     /**
19.      * @author flo
20.      */
21.     public class Main extends Sprite {
22.        
23.         private var mediaPlayer:MediaPlayer = new MediaPlayer();
24.        
25.         private var mainRegion : RegionGateway = new RegionGateway();
26.         private var leftChildRegion : RegionGateway = new RegionGateway();
27.         private var rightChildRegion : RegionGateway = new RegionGateway();
28.        
29.         private var parallelComposition:ParallelElement = new ParallelElement();       
30.        
31.         public function Main() {
32.            
33.             setupStage();
34.            
35.             setupMainRegion();
36.             setupLeftRegion();
37.             setupRightRegion();
38.                    
39.             mainRegion.addChildRegion(leftChildRegion);
40.             mainRegion.addChildRegion(rightChildRegion);
41.            
42.             addChild(mainRegion);         
43.            
44.             var mainVidElement:VideoElement = getMainVideoElement();
45.             var leftVidElement:VideoElement = getLeftVideoElement();
46.            
47.             // set width and height to 100 per cent
48.             // display as a centered letterbox     
49.             LayoutUtils.setRelativeLayout(mainVidElement.metadata, 100, 100 );
50.             LayoutUtils.setRelativeLayout(leftVidElement.metadata, 100, 100 );
51.             LayoutUtils.setLayoutAttributes(mainVidElement.metadata, ScaleMode.LETTERBOX, RegistrationPoint.CENTER);
52.             LayoutUtils.setLayoutAttributes(leftVidElement.metadata, ScaleMode.LETTERBOX, RegistrationPoint.CENTER);
53.            
54.             // wire video element with region          
55.             mainVidElement.gateway = mainRegion;
56.             leftVidElement.gateway = leftChildRegion;
57.                        
58.             // add both videos to a parallel composition           
59.             parallelComposition.addChild(mainVidElement);
60.             parallelComposition.addChild(leftVidElement);         
61.                        
62.             // play composition   
63.             mediaPlayer.element = parallelComposition;
64.         }
65.  
66.         private function setupMainRegion():void {
67.     
68.             // color and alpha
69.             mainRegion.backgroundColor = 0xf7f6af;
70.             mainRegion.backgroundAlpha = 0.5;
71.            
72.             // set to 640x480 pixels
73.             LayoutUtils.setAbsoluteLayout(mainRegion.metadata, 640, 480);
74.        
75.         }
76.        
77.         private function setupLeftRegion():void {
78.             // color and alpha
79.             leftChildRegion.backgroundColor = 0x9bd6a3;   
80.             leftChildRegion.backgroundAlpha = 1;
81.             // left=10, top=10, right=flexible, bottom=10
82.             LayoutUtils.setAnchorLayout(leftChildRegion.metadata, 10, 10, NaN, 10);
83.             // width=100 pixels, height=250
84.             LayoutUtils.setAbsoluteLayout(leftChildRegion.metadata, 250, 250 );
85.        
86.         }
87.        
88.         private function setupRightRegion():void {
89.             // color and alpha
90.             rightChildRegion.backgroundColor = 0x4e8264;
91.             rightChildRegion.backgroundAlpha = 1;   
92.             // left=flexible, top=10, right=10, bottom=10            
93.             LayoutUtils.setAnchorLayout(rightChildRegion.metadata, NaN, 10, 10, 10);
94.             // width=100 pixels, height=flexible
95.             LayoutUtils.setAbsoluteLayout(rightChildRegion.metadata, 100, NaN );           
96.         }
97.        
98.         private function getMainVideoElement():VideoElement {
99.             return new VideoElement(new NetLoader(), new URLResource(new URL("http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv")));
100.         }
101.        
102.         private function getLeftVideoElement():VideoElement {
103.             return new VideoElement(new NetLoader(), new URLResource(new FMSURL("rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short")));
104.         }
105.  
106.         private function setupStage():void {
107.             this.stage.scaleMode = StageScaleMode.NO_SCALE;
108.             this.stage.align = StageAlign.TOP_LEFT;   
109.         }
110.        
111.        
112.     }
113. }