Heute gibt es das erste Codebeispiel zu Adobes neuem Open Source Media Framework (OSMF). Nach der Ankündigung des Frameworks (noch unter dem Codenamen Strobe) und den ersten öffentlichen Downloads nimmt das OSMF nun langsam Form.

Das Beispiel ist sehr einfach gehalten und spielt jediglich ein Video ab. Anschauen

Es basiert auf der aktuellen OSMF-Version 0.5. Die Demo verwendet Flex, müsste jedoch analog auch mit Flash CS4 funktionieren, da das OSMF unabhängig von jeglichen Frameworks ist. Flash CS3 wird scheinbar nicht mehr unterstützt, da z.B. Vektoren verwendet werden, die erst mit Flash Player 10 eingeführt wurden.

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.         // Wichtige Klassen des OSMF importieren   
  7.         import org.openvideoplayer.display.*;
  8.         import org.openvideoplayer.image.*;
  9.         import org.openvideoplayer.video.*;
  10.         import org.openvideoplayer.net.*;
  11.         import org.openvideoplayer.media.*;
  12.         import org.openvideoplayer.utils.*;
  13.         import org.openvideoplayer.events.*;
  14.         import org.openvideoplayer.swf.*;
  15.            
  16.         // neues MediaPlayerSprite-Objekt   
  17.         public var sprite:MediaPlayerSprite = new MediaPlayerSprite();
  18.        
  19.         /**
  20.          * Die Funktion init wird zu Beginn aufgerufen (creationComplete, siehe oben)
  21.          */
  22.         public function init():void {
  23.             // URL des Videos
  24.             var myURL:URL = new URL("./demo-video.flv");
  25.                            
  26.             // neues Videoelement
  27.             sprite.element = new VideoElement( new NetLoader(), new URLResource(myURL)  );
  28.                
  29.             // Sprite des MediaPlayer zur Bühne hinzufügen
  30.             myUI.addChild(sprite);
  31.            
  32.             sprite.mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onStateChange);
  33.        
  34.         }
  35.        
  36.         /**
  37.          *Funktion wird bei einem State Change des Videoplayers aufgerufen
  38.          */
  39.         private function onStateChange(event:MediaPlayerStateChangeEvent):void {
  40.             debugTxt.text += "State Change: " + event.newState.name + "\n";
  41.         }
  42.                        
  43.         ]]>
  44.        
  45.     </mx:Script>
  46.    
  47.     <!-- Container für das MediaPlayer Sprite -->
  48.     <mx:UIComponent id="myUI" width="400" height="300" />
  49.        
  50.     <!-- Bedienelemente -->
  51.     <mx:HBox>
  52.         <mx:Button click="sprite.mediaPlayer.play()" label="play" />
  53.         <mx:Button click="sprite.mediaPlayer.pause()" label="pause" />
  54.     </mx:HBox>
  55.    
  56.     <!-- Debug Text -->
  57.     <mx:TextArea id="debugTxt" width="400" height="100" editable="false" />
  58.    
  59. </mx:Application>

Der Ablauf, um ein Video abzuspielen, ist recht einfach. Zuerst wird ein neues MediaPlayerSprite erstellt. Dieses hat eine Eigenschaft element, der verschiedene Medienelemente (Video, Audio, Grafik, SWF, etc.) zugeordnet werden können (wie z.B. hier ein VideoElement). OSMF ist also kein reiner Videoplayer, sondern kann unterschiedliche Medien abspielen.

Beim Erstellen des VideoElement-Objekts kommt die Klasse NetLoader zum Einsatz. Sie sorgt für den Verbindungsaufbau zu einer Audio- oder Videodatei (also NetConnection/NetStream). Dies kann sowohl als Progressive Download (HTTP) oder auch als Stream (RTMP) geschehen.

Link: Building a Hello World App with OSMF
Link: Open Source Media Framework
Archiv: OSMF