タイムコードプレーヤを作ってみる

Brightcove News

タイムコードプレーヤとは再生開始時間と終了時間を指定して動画の一部を再生するプレーヤのことです。長尺な動画が増えてくる昨今、丸々一本共有するのではなく、見て欲しい部分だけを共有したり再生できると便利なケースもあります。動画のリンクをメールで送ったり、ブログに張り付けたりする際に、時間を指定してピンポイントで再生できるプレーヤを作ってみます。

今回作る動画プレーヤは、動画があるページへのURL、

http://www.brightcove.co.jp/samples/timecode.html

に Query String を使って再生開始時間と終了時間を指定できるようにします。動画の1分30秒から20秒再生したい場合は、

http://www.brightcove.co.jp/samples/timecode.html?bcs=90&bce=110

のように、再生開始時間 (bcs)、再生終了時間 (bce) を URL の Query String として指定して再生時間をコントロールできるようにします。

JavaScript でも ActionScript でも同じ機能を実装することが可能ですが、今回は ActionScript を使い、SWFコンポーネント (Timecode.swf) を作成し、他のプレーヤでも同じプラグインが再利用できるようにします。大まかな手順は以下のとおりです。既にコンパイルされたコンポーネント Timecode.swf を使いたい場合は、サンプルコードをダウンロードし、以下の手順の 1)、2) を読み飛ばし手順 3) へ進んでください。

1) 準備
Flash/Flex で開発するにあたり、Brightcove Player API が簡単に使える、Brightcove Player API SWC をダウンロードします。Timecode.swf はブライトコーブプレーヤに読み込まれる SWF です。ブライトコーブプレーヤの持つオプジェクトや API を使って Timecode.swf コンポーネントから動画の再生をコントロールしています。Brightcove Player API SWC には Player ActionScript API のインターフェースが含まれていますので、Flex Builder や Flash IDE を使用し、ActionScript のコーディングが楽になります。Flex, Flash 等のIDE を使っている場合は BrightcovePlayerAPI.swc ファイルをコンパイルのライブラリに含めます。

2) Timecoder.as クラスファイル
再生開始時間と終了時間を bcs、bce から取得し再生を制御する ActionScript クラス Timecode.as ファイルを作ります。Brightcove Player API SWC を使うと、プラグインの初期化を initialize() メソッドで行います。この initialize() メソッドのなかで (a) ブライトコーブプレーヤへの参照を取得し、(b) URL Query String から bcs、bce パラメータで指定されている開始、終了時間を取得、(c) 動画ストリーミング開始、再生開始などのイベントリスナーを設定します。

/\*\* \* BEML の SWFLoader で読み込んだ際に自動的に実行される初期化メソッド \* クラスの中で使用する ExperienceModule, VideoPlayerModule への参照を取得 \*/

   override protected function initialize():void {
   
   // (a) ブライトコーブプレーヤへの参照を取得
   \_videoPlayerModule = player.getModule(APIModules.VIDEO\_PLAYER) as VideoPlayerModule;
    
    // (b) Player の設定パラメータを取得
   var \_experienceModule:ExperienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule; 
   var parameters:Object = \_experienceModule.getStage().loaderInfo.parameters;
    
    //URL query string capture
    var qs: QueryString = QueryString.getInstance();
    \_startPoint = int( qs.getValue("bcs") );
    \_endPoint = int( qs.getValue("bce") );

// デバッグ用コード

    
    //ExternalInterface.call("alert", "start point = " + \_startPoint + "/" + qs.getValue("bcs"));
    //ExternalInterface.call("alert", "end point = " + \_endPoint + "/" + qs.getValue("bce"));
    
    // (c) 動画再生イベントリスナーの登録
    \_videoPlayerModule.addEventListener(MediaEvent.BEGIN, onMediaBegin);
    \_videoPlayerModule.addEventListener(MediaEvent.PROGRESS, onMediaProgress);
  }

(a) ブライトコーブプレーヤへの参照を取得
Timecode.swf がコンポーネントとして再利用できるためには、読み込まれたどのプレーヤとも動くよう動画プレーヤへの参照をまず最初に初期化の段階で取得します。動画プレーヤへの参照（_videoPlayerModule）から再生開始ポイントを指定したり、停止したりといった再生動作の制御をしたり、動画プレーヤのイベントリスナーを利用したりする場合に必要です。

(b) URL Query String から bcs、bce パラメータを取得します。ブラウザのアドレスバーに入力されている URL に含まれている Query String を Flash で取得するために、こちらの QueryString クラスを利用しています。

(c) 動画ストリーミング再生開始、再生ボタンクリックなど再生を制御するために必要なイベントに、イベントリスナーを割り当てます。動画のストリーミングが始まった際に、bcs で指定された再生開始ポインへ移動します。動画再生が１フレームづつ進む度に MediaEvent.PROGRESS イベントが発生するので、そのたびに終了時間に到達していないかどうかをチェックします。動画再生に関連するイベントリスナーにイベントハンドラを設定します。今回は再生開始と停止時間を監視するために、動画再生開始イベント (MediaEvent.BEGIN)、動画再生の経過イベント (MediaEvent.PROGRESS) の3つにイベントハンドラをそれぞれ設定します。

/** * 動画再生が開始された際に呼び出されるイベントハンドラ (d) */ internal function onMediaBegin(e:MediaEvent):void { _videoPlayerModule.seek(_startPoint); }

/** * 動画再生中、フレームが進むたびに呼び出されるイベントハンドラ (e) */ internal function onMediaProgress(e:MediaEvent):void { if (e.position > _endPoint) { _videoPlayerModule.stop(); var evt:MediaEvent = new MediaEvent(MediaEvent.COMPLETE, e.position, e.duration, e.media, e.rendition); var ed:EventDispatcher = new EventDispatcher(); ed.dispatchEvent(evt); } }

(d) onMediaBegin(): 動画再生が最初に開始されるとこのイベントが発生します。ユーザが始めて再生する場合なので、再生開始ポイントへ再生ヘッドを進めます。

(e) onMediaProgress(): 動画再生中、1フレーム再生が進む旅に呼び出されるイベントです。このイベントハンドラの中で、動画の再生ポイント(秒）がどこにあるかを確認し、終了ポイントを超えたら再生停止します。

コンパイルされて出来上がった Timecode.swf ファイルをウェブサーバに FTP などでアップロードし完成です。

3) タイムコード用動画プレーヤを準備
今回はもっともシンプルな動画再生プレーヤをそのまま利用し、今作った Timecode.swf プラグインを読み込んで使います。Brightcove Studio にログインし、Publishing モジュールからタイムコードプレーヤという名前の新しくプレーヤを作成します。プレーヤのテンプレートは Chromeless Player を選びます。

今作ったばかりの「タイムコードプレーヤ」の設定ダイアログを開き、プラグインタブをクリックします。URL の入力ボックスに Timecode.swf をアップロードした URL を入力します。
例) http://www.mycompany.co.jp/xxx/yyy/Timecode.swf

.png)

動画再生プレーヤはこれで完成です。後はパブリッシュ用コードを取得して、HTML にコピー＆ペーストして出来上がりです。HTMLファイルをブラウザからリクエストする際、URL の最後に Query String を付け再生開始時間と終了時間を指定して動作を確認出来ます。