Flex には、ストリーミングメディアを Flex アプリケーションに組み込む方法として VideoDisplay コントロールが用意されています。このコントロールを使用して、Flex は FLV（Flash Video）ファイルをサポートしています。

Flex でのメディアの使用

メディア（ムービーやオーディオクリップなど）が Web ユーザーへの情報提供手段として使用される機会はますます多くなっています。そのため、ユーザーにメディアをストリーミングで送信して制御させるための仕組みが必要とされています。例えば、メディアコントロールの用途として次のような場合が考えられます。

• 会社の CEO からのビデオメッセージを再生する
• 映画や映画の予告編をストリーミングする
• 歌や歌の一部分をストリーミングする
• 学習教材をメディアの形で提供する

Flex のストリーミング VideoDisplay コントロールを使用すれば、Flash プレゼンテーションにストリーミングメディアを容易に組み込めます。このコントロールにより、Flex では FLV（Flash Video File）ファイルが利用できます。このコントロールはビデオおよびオーディオデータで使用できます。アプリケーションで VideoDisplay コントロールだけを使用する場合、ユーザーがメディアファイルを制御する手段は提供されません。

VideoDisplay コントロールについて

Flex で作成される VideoDisplay コントロールにユーザーインターフェイスは表示されません。これは単にメディアを格納および再生するためのコントロールです。

コントロールの playheadTime プロパティには、ビデオファイル内における再生ヘッドの現在の位置が秒単位で保持されます。このコントロールが送出するイベントの大部分は、関連付けられたイベントオブジェクトに再生ヘッドの位置を含んでいます。再生ヘッド位置を一度使用すると、ビデオファイルが特定の位置に達したときにイベントが送出されます。詳しくは、キューポイントの追加を参照してください。

VideoDisplay コントロールでは、volume プロパティもサポートしています。このプロパティは、0.0 ～ 1.00 の値を取ります。0.0 はミュート、1.00 は最大ボリュームです。デフォルト値は 0.75 です。

メディアコンポーネントのサイズ設定

VideoDisplay コントロールで再生されるビデオメディアの外観は、次のプロパティによる影響を受けます。

• maintainAspectRatio
• height
• width

maintainAspectRatio を true（デフォルト）に設定すると、コントロールのサイズが設定された後に、メディアのサイズが再調整されます。メディアのサイズは、縦横比を維持するように設定されます。

コントロールの width および height プロパティを両方とも省略すると、コントロールのサイズは再生中のメディアと同じサイズになります。一方のプロパティのみを指定し、maintainAspectRatio プロパティが false になっている場合、他方のプロパティの値は再生中のメディアのサイズによって決まります。maintainAspectRatio プロパティが true ならば、サイズが変更されてもメディアの縦横比は維持されます。

次の例では、VideoDisplay コントロールを作成しています。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplaySimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:VBox>
        <mx:VideoDisplay 
            source="http://localhost:8100/flex/assets/MyVideo.flv"
            height="400" 
            width="400"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Flex のデフォルトでは、VideoDisplay コントロールのサイズはメディアに合わせて調整されます。コントロールの width プロパティまたは height プロパティを指定し、幅と高さのいずれかがメディアのサイズよりも小さい場合、コンポーネントのサイズは変更されません。コンポーネントに合わせてメディアのサイズが調整されます。コントロールの再生領域がメディアのデフォルトサイズより小さい場合、メディアはコントロール内に収まるように縮小されます。

VideoDisplay コントロールのメソッドの使用

アプリケーションでは、VideoDisplay コントロールに備わる close()、load()、pause()、play() および stop() の各メソッドを使用できます。次の例では、2 つの Button コントロールのイベントリスナーで pause() メソッドと play() メソッドを使用して、FLV ファイルの一時停止と再生を行っています。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayStopPlay.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <mx:VideoDisplay id="myVid" 
            source="http://localhost:8100/flex/assets/MyVideo.flv"/>
        <mx:Button label="Pause" click="myVid.pause();"/>
        <mx:Button label="Play" click="myVid.play();"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

キューポイントの追加

キューポイントを使用すると、メディアの再生ヘッドが指定の位置に達した時点でイベントをトリガできます。キューポイントを使用するには、cuePointManagerClass プロパティを mx.controls.videoClasses.CuePointManager に設定してキューポイントの管理を有効にし、次にキューポイントの配列を VideoDisplay コントロールの cuePoints プロパティに渡します。この配列の各エレメントには 2 つのフィールドを含めます。1 つは name フィールドで、キューポイントに付ける任意の名前を指定します。もう 1 つは time フィールドで、キューポイントを関連付ける VideoDisplay コントロールの再生ヘッド位置を秒数で指定します。

VideoDisplay コントロールの再生ヘッドがいずれかのキューポイントに達すると、再生ヘッドから cuePoint イベントが送出されます。次に例を示します。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCP.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.events.CuePointEvent;
            import mx.controls.videoClasses.CuePointManager;

            private function cpHandler(event:CuePointEvent):void {
                cp.text="got to cuepoint: " + event.cuePointName + " " + 
                    String(event.cuePointTime);
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:VideoDisplay 
            source="http://localhost:8100/flex/assets/MyVideo.flv"
            cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
            cuePoint="cpHandler(event);">
            <mx:cuePoints>
                <mx:Object name="first" time="10"/>
                <mx:Object name="second" time="20"/>
            </mx:cuePoints>
        </mx:VideoDisplay>
        <mx:TextArea id="cp"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、コントロールがキューポイントに達したとき、イベントリスナーで TextArea コントロールにストリングを表示しています。表示するストリングは、キューポイントの名前と時間です。

CuePointManager クラスの使用によるキューポイントの追加

VideoDisplay コントロールのキューポイントは、cuePointManager プロパティを使用して設定できます。このプロパティの型は CuePointManager であり、キューポイントをプログラムによって操作するために使用するメソッドは、次に示す例のように CuePointManager クラスで定義されます。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCPManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.CuePointEvent;

            [Bindable]
            private var myCuePoints:Array = [
            { name: "first", time: 10},
            { name: "second", time: 20} ];           
            
            // Set cue points using methods of the CuePointManager class.
            private function initCP():void {
                myVid.cuePointManager.setCuePoints(myCuePoints);
            }

            private var currentCP:Object=new Object();

            private function cpHandler(event:CuePointEvent):void {
                cp.text="go to cuepoint: " + event.cuePointName + " " + 
                    String(event.cuePointTime);
                // Remove cue point.
                currentCP.name=event.cuePointName;
                currentCP.time=event.cuePointTime;
                myVid.cuePointManager.removeCuePoint(currentCP);
                // Display the number of remaining cue points. 
                cp.text=cp.text + "\n" + "Cue points remaining: " + 
                    String(myVid.cuePointManager.getCuePoints().length); 
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:VideoDisplay id="myVid" 
            initialize="initCP();" 
            cuePointManagerClass="mx.controls.videoClasses.CuePointManager"
            source="http://localhost:8100/flex/assets/MyVideo.flv"
            cuePoint="cpHandler(event);"/>
        <mx:TextArea id="cp" width="200" />
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

カメラからのストリーミングビデオ

次の例のように、VideoDisplay.attachCamera() メソッドを使用すると、カメラからのビデオストリームを表示するようにコントロールを設定できます。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayCamera.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
    
            // Define a variable of type Camera.
            import flash.media.Camera;
            public var cam:Camera;

            public function initCamera():void {
                // Initialize the variable.
                cam = Camera.getCamera();
                myVid.attachCamera(cam)
            }
        ]]>
    </mx:Script>
  
    <mx:VideoDisplay id="myVid" 
        width="320" height="240" 
        creationComplete="initCamera();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、VideoDisplay コントロールの creationComplete イベントのイベントハンドラ内に Camera オブジェクトを作成し、その Camera オブジェクトを引数として attachCamera() メソッドに渡しています。

Flash Media Server 2 での VideoDisplay コントロールの使用

VideoDisplay コントロールを使用すれば、次の例のように、Adobe® Flash® Media Server 2 からメディアストリームを読み込むことができます。

<?xml version="1.0"?>
<!-- controls\videodisplay\VideoDisplayFMS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:HBox>
        <mx:Label text="RTMP FMS 2.0"/>
        <mx:VideoDisplay 
            autoBandWidthDetection="false" 
            source="rtmp://localhost/videodisplay/bike.flv"/>
    </mx:HBox>
</mx:Application>

この例では、bike.flv ファイルを Flash Media Server 2\applications\videodisplay\streams\_definst_ ディレクトリに配置しています。

autoBandWidthDetection プロパティは、デフォルト値である false に明示的に設定されています。autoBandWidthDetection プロパティが true の場合、サーバーサイドファイル main.asc を Flash Media Server 2\applications\videodisplay\scripts ディレクトリに作成する必要があります。このファイルは次の関数を実装します。

application.onConnect = function(p_client, p_autoSenseBW) {}
application.calculateClientBw = function(p_client) {}
Client.prototype.getStreamLength = function(p_streamName) {}

以下は main.asc の実装の例を示したものです。

application.onConnect = function(p_client, p_autoSenseBW) {
    //Add security code here.

    this.acceptConnection(p_client);

    if (p_autoSenseBW)
        this.calculateClientBw(p_client);
    else
        p_client.call("onBWDone");
}

Client.prototype.getStreamLength = function(p_streamName) {
    return Stream.length(p_streamName);
}

application.calculateClientBw = function(p_client) {
    // Add code to set the clients BandWidth.
    // Use p_client.getStats() which returns bytes_in 
    // and bytes_Out and check your bandWidth using 
    // p_client.call("onBWCheck", result, p_client.payload).
    p_client.call("onBWDone");
}

main.asc の詳細については、Flash Media Server 2 のマニュアルを参照してください。

Flash Media Server の AMF バージョンの指定

NetConnection オブジェクト、NetStream オブジェクトまたは SharedObject オブジェクトをバイナリデータとして読み込むか書き込むと、オブジェクトの objectEncoding プロパティには、使用する AMF（Action Message Format）のバージョンが示されます。これは ActionScript 3.0 形式、ActionScript 1.0 形式または ActionScript 2.0 形式です。objectEncoding プロパティの有効な値には次のものがあります。

AMF0 

オブジェクトは ActionScript 1.0 および 2.0 の AMF 形式を使用して直列化されます。

AMF3 

オブジェクトは ActionScript 3.0 の AMF 形式を使用して直列化されます。

DEFAULT 

オブジェクトは Flash Player のバージョンのデフォルトの形式を使用して直列化されます。

Flash Media Server のすべてのバージョンが、AMF0 のエンコードを使用します。そのため Flex アプリケーションでは、Flash Media Server で使用されるすべての NetConnection オブジェクトおよび SharedObject オブジェクトの objectEncoding プロパティを、AMF0 に設定する必要があります。NetStream では、objectEncoding プロパティは読み取り専用です。自身のサーバーへの FAP または RTMP 接続を行う際は、常に AMF3 を使用できます。