Flash Videoのプレイヤー開発 【その３】

システム開発部　ASP開発・カスタマイズチームの川上です。

Flash Videoのプレイヤー開発について、

第３回目の今日は、
「Flash Videoのカスタムプレイヤー作成」です。

前回のエントリーでは、FLVPlaybackコンポーネントを利用したプレイヤー作成方法を、
ご紹介いたしました。
今回はVideoオブジェクトを利用したプレイヤー作成方法をご紹介させていただきます。

■カスタムプレイヤー作成方法

完成サンプル

1. 新規Flashドキュメントを開きます。
2. [ウィンドウ]→[ライブラリ]を選択し、ライブラリパネルを表示します。
3. ライブラリパネル右上のポップアップダウンメニューから[新規ビデオ]を選択します。
4. シンボル名をつけ、種類に"ビデオ(ActionScript制御)"を選択し、[OK]をクリックします。
5. ライブラリからビデオオブジェクトをステージにドラッグし、任意のサイズに変更します。
6. 配置したビデオオブジェクトにインスタンス名をつけます(例：myFLVPlayback)
7. ビデオのコントローラに使用する再生・一時停止ボタン、停止ボタン、ミュートボタン、シークバーを作成します。（下図参照）
   • 再生・停止ボタン：　[コンポーネント] - [User Interface] - [Button] を拡張
   • シークバー：シークバーの枠とプログレスバーの作成
   • ミュートボタン：ミュートＯＮとＯＦＦのデザインの作成、フレームラベルを追加
8. 配置したボタン、シークバーにそれぞれインスタンス名をつけます。（下図参照）
   • 再生・停止ボタン → playPauseButton
   • 停止ボタン         → stopButton
   • ミュートボタン      → muteButton
   • シークバー全体   → seekControl
   • シークバー枠　　　→ seekBar
   • シークバー内      → seekProgresBar
9. ビデオを準備します（今回は「sample.flv」）。
10. 新規レイヤーを作成し、以下のスクリプトを追加して実行します。

import flash.media.Video;
import flash.media.Sound;

var nc:NetConnection;
var ns:NetStream;
var isMute:Boolean = false;
var isPlaying:Boolean = false;
var muteCtrl:SoundTransform;
var streamLength:Number;

init();

function init():void {
    nc = new NetConnection();
    nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
    nc.connect(null);
}

function onNetStatus(event:NetStatusEvent):void {
    if (event.info.code == "NetConnection.Connect.Success") {
        ns = new NetStream(nc);
        ns.client = this;
        ns.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
        myFLVPlayback.attachNetStream(ns);
        muteCtrl = ns.soundTransform;
        addButtonListener();
    }
}

function addButtonListener():void {
    seekControl.addEventListener(MouseEvent.CLICK, seekBarClickHandler);
    playPauseButton.addEventListener(MouseEvent.CLICK, playPauseButtonClickHandler);
    stopButton.addEventListener(MouseEvent.CLICK, stopButtonClickHandler);
    muteButton.addEventListener(MouseEvent.CLICK, muteButtonClickHandler);
}

function onMetaData(info:Object):void {
    streamLength = Number(info.duration);
    addEventListener(Event.ENTER_FRAME, progressHandle);
}

function playPauseButtonClickHandler (event:MouseEvent) :void {
    if (!isPlaying) {
        ns.play("sample.flv");
        isPlaying = true;
    } else {
        ns.togglePause();
    }
}

function stopButtonClickHandler (event:MouseEvent):void {
    ns.close();
    isPlaying = false;
    playPauseButton.selected = false;
    removeEventListener(Event.ENTER_FRAME, progressHandle);
    seekControl.seekProgressBar.width = 0;
}

function muteButtonClickHandler (event:MouseEvent):void {
    if (isMute) {
        muteCtrl.volume = 1;
        isMute = false;
        muteButton.gotoAndStop("muteOff");
    } else {
        muteCtrl.volume = 0;
        isMute = true;
        muteButton.gotoAndStop("muteOn");
    }
    ns.soundTransform = muteCtrl;
}

function seekBarClickHandler (event:MouseEvent):void {
    var seekTime:Number = streamLength * (seekControl.mouseX / seekControl.width);
    ns.seek(seekTime);
}

function progressHandle(evenet:Event):void{
    trace("progress");
    var thumbX:Number;
    if (ns.time < streamLength) {
        seekControl.seekProgressBar.width = seekControl.seekBar.width * (ns.time / streamLength);
    } else {
        stopButtonClickHandler(null);
    }
}

次回は「Flash Media Server」を利用したプレイヤー開発と「配信プロトコル」について
解説致します。
ご期待下さい。