Im ersten Codebeispiel zum Open Source Media Framework (OSMF) wurde gezeigt, wie man eine Videodatei abspielt (z.B. .flv oder .f4v).
Wie dort bereits angedeutet, ist das OSMF jedoch nicht auf Videos beschränkt. In diesem Artikel wird gezeigt, wie man auch andere Medientypen abspielt. Zusätzlich wird ein Sequenz erstellt, in der einige Medienelemente automatisch nacheinander abgespielt werden.
Videos, Bilder, Sounds und SWF
Das Open Source Media Framework (OSMF) kann neben Videos auch Bilder, SWFs oder Sounds abspielen. Dazu werden folgende Klassen verwendet:
VideoElement
für Videos (z.B. .flv, .f4v, etc.)SWFElement
für kompilierte Flashfiles (.swf)ImageElement
für Bilder (z.B. .jpg, .png, .gifAudioElement
für Sounds (z.B. .mp3 oder .m4a)
Das Tolle daran ist, dass das Laden und Abspielen immer nach dem gleichen Prinzip funktioniert. Man muss also nicht wissen, welche ActionScript-APIs im Hintergrund eingesetzt werden, da dies gekapselt ist.
Für jeden Medientyp gibt es eine entsprechende Klasse, die den spezifischen Ladevorgang implementiert (NetLoader, SWFLoader, ImageLoader, SoundLoader
).
-
new VideoElement( new NetLoader(), new URLResource(myVideoURL))
-
new AudioElement( new SoundLoader(), new URLResource(myMP3URL))
-
new ImageElement( new ImageLoader(), new URLResource(myImageURL))
-
new AudioElement( new SoundLoader(), new URLResource(myMP3URL))
Medienelemente hintereinander abspielen
Es ist sehr einfach, eine sequenzielle Abfolge zu erstellen. Die Klasse heißt SerialElement
. Diesem Element kann man per addChild
nun einzelne Medienelemente hinzufügen, die dann einfach hintereinander angezeigt werden.
-
var serialElement:SerialElement = new SerialElement();
-
serialElement.addChild ( new VideoElement( new NetLoader(), new URLResource(myVideoURL)) );
-
serialElement.addChild ( new AudioElement( new SoundLoader(), new URLResource(myMP3URL)) );
-
...
Anzeigedauer
Da z.B. Bilder keine Dauer haben, kann man die Anzeigedauer mithilfe eines TemporalProxyElement
-Objekts festlegen. Das Objekt wird mit einer Dauer in Sekunden (im Beispiel 3s) und einem Medienelement initiert.
-
serialElement.addChild
-
( new TemporalProxyElement
-
( 3, new ImageElement( new ImageLoader(), new URLResource(myImageURL)))
-
);
Beispiel
Hier ein kleines Beispiel, dass mehrere Elemente hintereinander anzeigt. Zuerst steht ein Bilder für drei Sekunden, dann folgt ein kurzes Videos. Es folgt eine MP3-Datei und zuletzt ein SWF-File. Wie man sieht, kann die Sequenz über die Play-/Pausebuttons auch angehalten werden. Beispiel anschauen
-
<?xml version="1.0" encoding="utf-8"?>
-
:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"> -
-
:Script> -
// Wichtige Klassen des OSMF importierenimport org.openvideoplayer.display.*;import org.openvideoplayer.image.*;import org.openvideoplayer.video.*;import org.openvideoplayer.net.*;import org.openvideoplayer.media.*;import org.openvideoplayer.utils.*;import org.openvideoplayer.events.*;import org.openvideoplayer.swf.*;import org.openvideoplayer.composition.*;import org.openvideoplayer.proxies.*;import org.openvideoplayer.audio.*;public var sprite:MediaPlayerSprite = new MediaPlayerSprite();/*** Die Funktion init wird zu Beginn aufgerufen (creationComplete, siehe oben)*/public function init():void {// URL der Medienelementevar myVideoURL:URL = new URL("./demo-video.flv");var mySWFURL:URL = new URL("http://mediapm.edgesuite.net/osmf/swf/ReferenceSampleSWF.swf");var myImageURL:URL = new URL("./myimage.jpg");var myMP3URL:URL = new URL("http://mediapm.edgesuite.net/osmf/content/test/train_1500.mp3");// neue nacheinander ablaufende Sequence erstellenvar serialElement:SerialElement = new SerialElement();// Bild (z.B. .jpg) anzeigenserialElement.addChild( new TemporalProxyElement( 3, new ImageElement( new ImageLoader(), new URLResource(myImageURL))));// Video anzeigenserialElement.addChild ( new VideoElement( new NetLoader(), new URLResource(myVideoURL)) );// AudioElement (.mp3) hinzufügenserialElement.addChild ( new AudioElement( new SoundLoader(), new URLResource(myMP3URL)) );// SWFElement (.swf) hinzufügenserialElement.addChild( new TemporalProxyElement( 3, new SWFElement( new SWFLoader(), new URLResource(mySWFURL))));// das Element mit dem Ablauf dem Player hinzufügensprite.element = serialElement;// Sprite des MediaPlayer zur Bühne hinzufügenmyUI.addChild(sprite);sprite.mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onStateChange);}/***Funktion wird bei einem State Change des Videoplayers aufgerufen*/private function onStateChange(event:MediaPlayerStateChangeEvent):void {debugTxt.text += "State Change: " + event.newState.name + "\n";}]]>:Script>
:UIComponent id="myUI" width="400" height="300" /> :HBox> :Button click="sprite.mediaPlayer.play()" label="play" /> :Button click="sprite.mediaPlayer.pause()" label="pause" /> :HBox>:TextArea id="debugTxt" width="400" height="100" editable="false" /> :Application>
Schreibe einen Kommentar