Ergänzend zum Artikel Dynamic Streaming mit dem Flash Media Server möchte ich eine sehr einfache Möglichkeit zeigen, wie man ohne große ActionScript-Kenntnisse dynamisches Streaming mit der FLV Playback Komponente 2.5 und einer SMIL-Datei realisieren kann.

Verwendet wird eine XML-Datei nach dem SMIL-Standard (Synchronized Multimedia Integration Language), einer Auszeichnungssprache für zeitsynchronisierte, multimediale Inhalt.

SMIL-Datei erstellen

Die SMIL-Datei kann mit jedem Text-/Codeeditor erstellt werden und wird mit dem (frei wählbaren) Dateinamen dynstream.smil im gleichen Verzeichnis wie die Flashanwendung abgespeichert.

XML:
  1. <smil>
  2.    <head>
  3.       <meta base="rtmp://192.168.2.108/vod/" />
  4.    </head>
  5.    <body>
  6.       <switch>
  7.         <video src="mp4:sample1_150kbps.f4v" system-bitrate="150000"/>
  8.         <video src="mp4:sample1_700kbps.f4v" system-bitrate="700000"/>
  9.         <video src="mp4:sample1_1500kbps.f4v" system-bitrate="1500000"/>
  10.       </switch>
  11.    </body>
  12. </smil>

Sie enthält im head den Pfad zum Flash Media Server (rtmp://192.168.2.108) und der FMS-Anwendung mit dem Video (vod).

Im body stehen die Pfade zu den Bitraten-Varianten des Videos. Bei system-bitrate wird die jeweilige Bitrate eingetragen (in Bit, nicht wie in ActionScript in KBit)

SMIL-Datei in Flash laden

In Flash wird wie gewohnt die FLV Playback Komponente eingebunden. Einziger wesentlicher Unterschied: Man gibt statt eines Videofiles als Quelle einfach die SMIL-Datei als Videodatei an! Außerdem muss man das dynamische Streaming noch aktivieren (Zeile 2).

Actionscript:
  1. import fl.video.*;
  2. VideoPlayer.iNCManagerClass = NCManagerDynamicStream;
  3. myFLVPlayback.source = "dynstream.smil";

SMIL-Datei in Flex laden

Verwendet man Flex, sieht die Kombination von FLV Playback Komponente und externer SMIL-Datei z.B. so aus:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()" layout="absolute">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.core.UIComponent;
  6.             import fl.video.*;
  7.            
  8.             private var vid:FLVPlayback;
  9.            
  10.             private function onCreationComplete():void  {
  11.                
  12.                 VideoPlayer.iNCManagerClass = NCManagerDynamicStream;
  13.                            
  14.                 vid = new FLVPlayback();
  15.                 var ui:UIComponent = new UIComponent();
  16.                 this.addChild( ui );
  17.                 ui.addChild( vid );
  18.                 
  19.                 vid.width = 640;           
  20.                 vid.height = 480;
  21.                 vid.skin = "SkinUnderPlaySeekMute.swf";
  22.                
  23.                 vid.source = "dynstream.smil";                           
  24.             }    
  25.         ]]>
  26.     </mx:Script>
  27.    
  28.    
  29. </mx:Application>