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, .gif
  • AudioElement 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).

PLAIN TEXT
XML:
  1. new VideoElement( new NetLoader(), new URLResource(myVideoURL))
  2. new AudioElement( new SoundLoader(), new URLResource(myMP3URL))
  3. new ImageElement( new ImageLoader(), new URLResource(myImageURL))
  4. 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.

PLAIN TEXT
XML:
  1. var serialElement:SerialElement = new SerialElement();
  2. serialElement.addChild ( new VideoElement( new NetLoader(), new URLResource(myVideoURL)) );
  3. serialElement.addChild ( new AudioElement( new SoundLoader(), new URLResource(myMP3URL)) );
  4. ...

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.

PLAIN TEXT
XML:
  1. serialElement.addChild
  2.     ( new TemporalProxyElement
  3.         ( 3, new ImageElement( new ImageLoader(), new URLResource(myImageURL)))
  4.     );

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

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
  3.    
  4.     <mx:Script>
  5.         <![CDATA[
  6.  
  7.         // Wichtige Klassen des OSMF importieren   
  8.         import org.openvideoplayer.display.*;
  9.         import org.openvideoplayer.image.*;
  10.         import org.openvideoplayer.video.*;
  11.         import org.openvideoplayer.net.*;
  12.         import org.openvideoplayer.media.*;
  13.         import org.openvideoplayer.utils.*;
  14.         import org.openvideoplayer.events.*;
  15.         import org.openvideoplayer.swf.*;
  16.         import org.openvideoplayer.composition.*;
  17.         import org.openvideoplayer.proxies.*;
  18.         import org.openvideoplayer.audio.*;
  19.                            
  20.        
  21.         public var sprite:MediaPlayerSprite = new MediaPlayerSprite(); 
  22.        
  23.         /**
  24.          * Die Funktion init wird zu Beginn aufgerufen (creationComplete, siehe oben)
  25.          */
  26.         public function init():void {
  27.  
  28.             // URL der Medienelemente
  29.             var myVideoURL:URL = new URL("./demo-video.flv");
  30.             var mySWFURL:URL = new URL("http://mediapm.edgesuite.net/osmf/swf/ReferenceSampleSWF.swf");
  31.             var myImageURL:URL = new URL("./myimage.jpg");   
  32.             var myMP3URL:URL = new URL("http://mediapm.edgesuite.net/osmf/content/test/train_1500.mp3");   
  33.                
  34.             // neue nacheinander ablaufende Sequence erstellen
  35.             var serialElement:SerialElement = new SerialElement();   
  36.                    
  37.                
  38.             // Bild (z.B. .jpg) anzeigen
  39.             serialElement.addChild
  40.                 ( new TemporalProxyElement
  41.                     ( 3
  42.                     , new ImageElement
  43.                         ( new ImageLoader()
  44.                         , new URLResource(myImageURL)
  45.                         )
  46.                     )
  47.                 );
  48.                
  49.             // Video anzeigen   
  50.             serialElement.addChild ( new VideoElement( new NetLoader(), new URLResource(myVideoURL)) );
  51.            
  52.             // AudioElement (.mp3) hinzufügen
  53.             serialElement.addChild ( new AudioElement( new SoundLoader(), new URLResource(myMP3URL)) );
  54.                            
  55.             // SWFElement (.swf) hinzufügen   
  56.             serialElement.addChild
  57.                 ( new TemporalProxyElement
  58.                     ( 3
  59.                     , new SWFElement
  60.                         ( new SWFLoader()
  61.                         , new URLResource(mySWFURL)
  62.                         )
  63.                     )
  64.                 ); 
  65.                
  66.                
  67.                                
  68.             // das Element mit dem Ablauf dem Player hinzufügen
  69.             sprite.element = serialElement;
  70.                
  71.             // Sprite des MediaPlayer zur Bühne hinzufügen
  72.             myUI.addChild(sprite);
  73.            
  74.             sprite.mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onStateChange);
  75.        
  76.         }
  77.        
  78.         /**
  79.          *Funktion wird bei einem State Change des Videoplayers aufgerufen
  80.          */
  81.         private function onStateChange(event:MediaPlayerStateChangeEvent):void {
  82.             debugTxt.text += "State Change: " + event.newState.name + "\n";
  83.         }
  84.                        
  85.         ]]>
  86.        
  87.     </mx:Script>
  88.    
  89.     <!-- Container für das MediaPlayer Sprite -->
  90.     <mx:UIComponent id="myUI" width="400" height="300" />
  91.        
  92.     <!-- Bedienelemente -->
  93.     <mx:HBox>
  94.         <mx:Button click="sprite.mediaPlayer.play()" label="play" />
  95.         <mx:Button click="sprite.mediaPlayer.pause()" label="pause" />
  96.     </mx:HBox>
  97.    
  98.     <!-- Debug Text -->
  99.     <mx:TextArea id="debugTxt" width="400" height="100" editable="false" />
  100.    
  101. </mx:Application>