ビデオの例：ビデオジュークボックス

外部の playlist.xml ファイルは、ロードするビデオおよび再生の順序を指定します。XML ファイルをロードするには、次に示すように、URLLoader オブジェクトと URLRequest オブジェクトを使用する必要があります。

uldr = new URLLoader(); 
uldr.addEventListener(Event.COMPLETE, xmlCompleteHandler); 
uldr.load(new URLRequest(PLAYLIST_XML_URL));

このコードは、VideoJukebox クラスのコンストラクターに配置されるので、ファイルはコードが実行される前にロードされます。XML ファイルのロードが完了するとすぐに xmlCompleteHandler() メソッドが呼び出され、次のコードに示すように、外部ファイルが XML オブジェクトに解析されます。

private function xmlCompleteHandler(event:Event):void 
{ 
    playlist = XML(event.target.data); 
    videosXML = playlist.video; 
    main(); 
}

playlist の XML オブジェクトには、外部ファイルから取得された未処理 XML がありますが、ビデオの XML は、ビデオノードしか含まない XMLList オブジェクトです。サンプルの playlist.xml ファイルを次のコード例に示します。

<videos> 
    <video url="video/caption_video.flv" /> 
    <video url="video/cuepoints.flv" /> 
    <video url="video/water.flv" /> 
</videos>

最後に xmlCompleteHandler() メソッドが main() メソッドを呼び出し、表示リスト上の様々なコンポーネントインスタンスに加え、外部 FLV ファイルをロードするために使用される NetConnection および NetStream オブジェクトを設定します。

ユーザーインターフェイスを構築するには、表示リストに 5 つの Button インスタンスをドラッグし、それぞれ playButton 、 pauseButton 、 stopButton 、 backButton 、 forwardButton というインスタンス名を与える必要があります。

これらの Button インスタンスのそれぞれに対し、次のコード例に示すように、 click イベントのハンドラーを割り当てる必要があります。

playButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
pauseButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
stopButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
backButton.addEventListener(MouseEvent.CLICK, buttonClickHandler); 
forwardButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);

次のコードで示すように、 buttonClickHandler() メソッドでは、どのボタンインスタンスがクリックされたかを判断するために switch ステートメントを使用します。

private function buttonClickHandler(event:MouseEvent):void 
{ 
    switch (event.currentTarget) 
    { 
        case playButton: 
            ns.resume(); 
            break; 
        case pauseButton: 
            ns.togglePause(); 
            break; 
        case stopButton: 
            ns.pause(); 
            ns.seek(0); 
            break; 
        case backButton: 
            playPreviousVideo(); 
            break; 
        case forwardButton: 
            playNextVideo(); 
            break; 
    } 
}

次に、Slider インスタンスを表示リストに追加し、 volumeSlider というインスタンス名を与えます。次のコードは、Slider インスタンスの liveDragging プロパティを true に設定し、Slider インスタンスの change イベントのイベントリスナーを定義します。

volumeSlider.value = volumeTransform.volume; 
volumeSlider.minimum = 0; 
volumeSlider.maximum = 1; 
volumeSlider.snapInterval = 0.1; 
volumeSlider.tickInterval = volumeSlider.snapInterval; 
volumeSlider.liveDragging = true; 
volumeSlider.addEventListener(SliderEvent.CHANGE, volumeChangeHandler);

表示リストに ProgressBar インスタンスを追加し、 positionBar というインスタンス名を与えます。次のコード例で示すように、 mode プロパティを manual に設定します。

positionBar.mode = ProgressBarMode.MANUAL;

最後に、表示リストに Label インスタンスを追加し、 positionLabel というインスタンス名を与えます。Label インスタンスの値は、Timer インスタンスによって設定されます。

Flash Player がロードされた各ビデオのメタデータを検出すると、 onMetaData() コールバックハンドラーが NetStream オブジェクトの client プロパティで呼び出されます。次のコードではオブジェクトを初期化し、指定のコールバックハンドラーを設定します。

client = new Object(); 
client.onMetaData = metadataHandler;

metadataHandler() メソッドは、コードの前部で指定されたメタプロパティにデータをコピーします。これにより、アプリケーション全体で、いつでも現在のビデオのメタデータにアクセスすることが可能になります。 次に、ステージ上の Video オブジェクトは、メタデータから返されたサイズに合わせてサイズ変更されます。 最後に、再生中のビデオのサイズに合わせて positionBar プログレスバーインスタンスが移動、サイズ変更されます。 次のコードは、 metadataHandler() メソッド全体を示しています。

private function metadataHandler(metadataObj:Object):void 
{ 
    meta = metadataObj; 
    vid.width = meta.width; 
    vid.height = meta.height; 
    positionBar.move(vid.x, vid.y + vid.height); 
    positionBar.width = vid.width; 
}

ビデオを動的にロードするには、アプリケーションで NetConnection および NetStream オブジェクトを使用する必要があります。 次のコードは NetConnection オブジェクトを作成し、 null を connect() メソッドに渡します。 null を指定すると、Flash Player は、Flash Media Server などのサーバーではなく、ローカルサーバー上のビデオに接続します。

次のコードは、NetConnection および NetStream インスタンスの両方を作成し、 netStatus イベントのイベントリスナーを定義し、 client オブジェクトを client プロパティに割り当てます。

nc = new NetConnection(); 
nc.connect(null); 
 
ns = new NetStream(nc); 
ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
ns.client = client;

ビデオのステータスが変更されるたびに netStatusHandler() メソッドが呼び出されます。ステータスとは、ビデオの再生の開始または停止、バッファリング、またはビデオストリームが見つからないなどの状態を指します。 次のコードは netStatusHandler() イベントをリストします。

private function netStatusHandler(event:NetStatusEvent):void 
{ 
    try 
    { 
        switch (event.info.code) 
        { 
            case "NetStream.Play.Start": 
                t.start(); 
                break; 
            case "NetStream.Play.StreamNotFound": 
            case "NetStream.Play.Stop": 
                t.stop(); 
                playNextVideo(); 
                break; 
        } 
    }  
    catch (error:TypeError)  
    { 
        // Ignore any errors. 
    } 
}

前述のコードは、info オブジェクトのコードプロパティを評価し、コードが「NetStream.Play.Start」、「NetStream.Play.StreamNotFound」または「NetStream.Play.Stop」のどれであるかをフィルタリングします。他のすべてのコードは無視されます。 ネットストリームが開始すると、再生ヘッドを更新する Timer インスタンスがコードによって開始します。 ネットストリームが見つからない場合、または停止している場合は、Timer インスタンスは停止し、アプリケーションはプレイリスト内の次のビデオの再生を試行します。

Timer が実行されるたびに、ProgressBar クラスの setProgress() メソッドを呼び出すことで positionBar プログレスバーインスタンスの現在の位置が更新され、Label インスタンスである positionLabel は、現在のビデオの経過時間と合計時間によって更新されます。

private function timerHandler(event:TimerEvent):void 
{ 
    try 
    { 
        positionBar.setProgress(ns.time, meta.duration); 
        positionLabel.text = ns.time.toFixed(1) + " of " meta.duration.toFixed(1) + " seconds"; 
    }  
    catch (error:Error) 
    { 
        // Ignore this error. 
    } 
}

動的にロードされたビデオのボリュームを制御するには、NetStream オブジェクトで soundTransform プロパティを設定します。ビデオジュークボックスアプリケーションでは、Slider インスタンスである volumeSlider の値を変更することでボリュームレベルを変更することができます。次のコードは、NetStream オブジェクトの soundTransform プロパティに設定されている SoundTransform オブジェクトに Slider コンポーネントの値を割り当てることで、ボリュームレベルを変更する方法を示します。

private function volumeChangeHandler(event:SliderEvent):void 
{ 
    volumeTransform.volume = event.value; 
    ns.soundTransform = volumeTransform; 
}

アプリケーションの残りの部分では、ビデオがビデオストリームの末尾に到達したとき、またはユーザーが前のビデオまたは次のビデオにスキップしたときに、ビデオの再生を制御します。

次のメソッドは、選択中のインデックスの XMLList からビデオ URL を取得します。

private function getVideo():String 
{ 
    return videosXML[idx].@url; 
}

playVideo() メソッドは、NetStream オブジェクトの play() メソッドを呼び出し、現在選択されているビデオをロードします。

private function playVideo():void 
{ 
    var url:String = getVideo(); 
    ns.play(url); 
}

playPreviousVideo() メソッドは、現在のビデオインデックスをデクリメントし、 playVideo() メソッドを呼び出して新しいビデオファイルをロードし、プログレスバーを表示可能な状態に設定します。

private function playPreviousVideo():void 
{ 
    if (idx > 0) 
    { 
        idx--; 
        playVideo(); 
        positionBar.visible = true; 
    } 
}

最後のメソッド、 playNextVideo() はビデオインデックスをインクリメントし、 playVideo() メソッドを呼び出します。現在のビデオがプレイリストの最後のビデオである場合は、Video オブジェクトで clear() メソッドが呼び出され、プログレスバーインスタンスの visible プロパティが false に設定されます。

private function playNextVideo():void 
{ 
    if (idx < (videosXML.length() - 1)) 
    { 
        idx++; 
        playVideo(); 
        positionBar.visible = true; 
    } 
    else 
    { 
        idx++; 
        vid.clear(); 
        positionBar.visible = false; 
    } 
}