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.
[ad]
Quellcode
[as]
package {
import org.osmf.utils.FMSURL;
import org.osmf.layout.RegistrationPoint;
import org.osmf.display.ScaleMode;
import org.osmf.utils.URL;
import org.osmf.media.URLResource;
import org.osmf.net.NetLoader;
import org.osmf.video.VideoElement;
import org.osmf.composition.ParallelElement;
import org.osmf.gateways.RegionGateway;
import org.osmf.layout.LayoutUtils;
import org.osmf.media.MediaPlayer;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
/**
* @author flo
*/
public class Main extends Sprite {
private var mediaPlayer:MediaPlayer = new MediaPlayer();
private var mainRegion : RegionGateway = new RegionGateway();
private var leftChildRegion : RegionGateway = new RegionGateway();
private var rightChildRegion : RegionGateway = new RegionGateway();
private var parallelComposition:ParallelElement = new ParallelElement();
public function Main() {
setupStage();
setupMainRegion();
setupLeftRegion();
setupRightRegion();
mainRegion.addChildRegion(leftChildRegion);
mainRegion.addChildRegion(rightChildRegion);
addChild(mainRegion);
var mainVidElement:VideoElement = getMainVideoElement();
var leftVidElement:VideoElement = getLeftVideoElement();
// set width and height to 100 per cent
// display as a centered letterbox
LayoutUtils.setRelativeLayout(mainVidElement.metadata, 100, 100 );
LayoutUtils.setRelativeLayout(leftVidElement.metadata, 100, 100 );
LayoutUtils.setLayoutAttributes(mainVidElement.metadata, ScaleMode.LETTERBOX, RegistrationPoint.CENTER);
LayoutUtils.setLayoutAttributes(leftVidElement.metadata, ScaleMode.LETTERBOX, RegistrationPoint.CENTER);
// wire video element with region
mainVidElement.gateway = mainRegion;
leftVidElement.gateway = leftChildRegion;
// add both videos to a parallel composition
parallelComposition.addChild(mainVidElement);
parallelComposition.addChild(leftVidElement);
// play composition
mediaPlayer.element = parallelComposition;
}
private function setupMainRegion():void {
// color and alpha
mainRegion.backgroundColor = 0xf7f6af;
mainRegion.backgroundAlpha = 0.5;
// set to 640×480 pixels
LayoutUtils.setAbsoluteLayout(mainRegion.metadata, 640, 480);
}
private function setupLeftRegion():void {
// color and alpha
leftChildRegion.backgroundColor = 0x9bd6a3;
leftChildRegion.backgroundAlpha = 1;
// left=10, top=10, right=flexible, bottom=10
LayoutUtils.setAnchorLayout(leftChildRegion.metadata, 10, 10, NaN, 10);
// width=100 pixels, height=250
LayoutUtils.setAbsoluteLayout(leftChildRegion.metadata, 250, 250 );
}
private function setupRightRegion():void {
// color and alpha
rightChildRegion.backgroundColor = 0x4e8264;
rightChildRegion.backgroundAlpha = 1;
// left=flexible, top=10, right=10, bottom=10
LayoutUtils.setAnchorLayout(rightChildRegion.metadata, NaN, 10, 10, 10);
// width=100 pixels, height=flexible
LayoutUtils.setAbsoluteLayout(rightChildRegion.metadata, 100, NaN );
}
private function getMainVideoElement():VideoElement {
return new VideoElement(new NetLoader(), new URLResource(new URL(„http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv“)));
}
private function getLeftVideoElement():VideoElement {
return new VideoElement(new NetLoader(), new URLResource(new FMSURL(„rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/test/SpaceAloneHD_sounas_640_500_short“)));
}
private function setupStage():void {
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
}
}
}
[/as]