Smart Player API と従来の Player API をハイブリッドで使用する方法

従来の Player API では、Flash Player が搭載されているデバイス（PC/Mac, 多くの Android）でプレーヤがロードされている場合（Flash モード）でのみ、JavaScript や ActionScript を使用してプレーヤを操作することができましたが、Smart Player API の登場により、Flash Player が搭載されていないスマートフォンでプレーヤがロードされている場合（HTML5モード）でも、JavaScript にてプレーヤを操作できるようになりました。

この Smart Player API は、プレーヤが Flash モードでロードされている場合でもHTML５モードでロードされている場合でも同一のコードでプレーヤを操作することはできますが、例えば、プレーヤ上の画像オブジェクトを操作できないなど、いくつかの制限があります。

そこで、Flash モードのプレーヤの場合には、機能が豊富な従来のプレーヤ API を使用し、HTML5 モードのプレーヤの場合にのみ Smart Player API を使用する方法、つまり。従来の Player API と Smart Player API をハイブリッドで使用する方法の記述例をご紹介します。

今回の例は、(実用的であるかどうかは別として) 下記を実現しています。

• Flash モードの場合のみ、プレーヤ上にロゴを表示する
• Flash モード、HTML5 モードの両方で、動画再生開始時にブラウザのデバッグコンソールに、動画の長さや再生状態が出力されるようにする

前提:

• Publishing モジュールにて、該当のプレーヤ設定で「JavaScript/Action Script API を有効にする」、「HTML5 配信を有効にする」の両方が有効になっている
• JavaScript 形式の公開コード(クイック動画公開でいうところの「Web サイト」用の公開コード)を使用している

コード:
「BrightcoveExperiences.js」を「BrightcoveExperiences_all.js」に変更し、従来の Flash Player API を使用できるようにします。
また、公開コードに、 <param name="templateLoadHandler" value="onTemplateLoad" />　及び <param name="includeAPI" value="true" />　の 2 つのパラメータを付加し、Smart Player API を使用できるようにしています。

<div style="display:none">
</div>

<script type="text/javascript" src="http://admin.brightcove.co.jp/js/BrightcoveExperiences_all.js"></script>

<object id="myExperience" class="BrightcoveExperience">
 <param name="bgcolor" value="#FFFFFF" />
 <param name="width" value="486" />
 <param name="height" value="412" />
 <param name="playerID" value="81206537002" />
 <param name="playerKey" value="AQ~~,AAAADkwKNwE~,-mz7MYjDY6ZN_9dqSz6mVHrWGmsnSbjl" />
 <param name="isVid" value="true" />
 <param name="dynamicStreaming" value="true" />
 <param name="@videoPlayer" value="82034377002" />
 <param name="includeAPI" value="true" />
 <param name="templateLoadHandler" value="onTemplateLoad" />
</object>

下記のコードで、Smart Player API と従来の Player API のどちらを使用するかを決定します。
このコードにより、スマートフォンやタブレット端末からのアクセスであり、且つFlash Player がインストールされていない場合、Smart Player API を使用するようになります。

なお、コード内の「console.log」は、あくまでもデバッグを目的としたものであり、API と直接の関係はありません。

<script type="text/javascript">
brightcove.createExperiences();

var player;
var videoPlayer;
var experienceModule;

function onTemplateLoad(id) {
  player = brightcove.api.getExperience(id);
  //this means it is using smart player API
  if (player) {
    console.log("HTML5 モードのプレーヤです。");
  } else {
    player = brightcove.getExperience(id);
    console.log("Flash モードのプレーヤです。");
  }
  experienceModule = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
  console.log(experienceModule);
  var TEMPLATE_READY = brightcove.api.events.ExperienceEvent.TEMPLATE_READY;
  if (player.type == brightcove.playerType.HTML) {
    experienceModule.addEventListener(TEMPLATE_READY, onHTMLTemplateReady);
  } else {
    experienceModule.addEventListener(TEMPLATE_READY, onFlashTemplateReady);
  }
}

従来の API を使用する場合のメソッドを下記のような形で用意します（メソッドやシンタックスも従来の API を使用したものにします）。

//////////////////////////
// FLASH モード向け
//////////////////////////
function onFlashTemplateReady(event) {
  //画面右下にロゴを表示
  experienceModule.getLayoutRoot().appendChild("<Image id='testLabel2' visible='true' scaleMode='noScale' x='320' y='320' width='159' height='38' source='http://dev.brightcove.co.jp/nori/blog/logo-brightcove.png' url='http://www.brightcove.com/' tooltip='Brightcove サイトへ移動する'/>");
  var TEMPLATE_READY = brightcove.api.events.ExperienceEvent.TEMPLATE_READY;
  experienceModule.removeEventListener(TEMPLATE_READY, onFlashTemplateReady);
  console.log(event);
  videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  console.log(videoPlayer);
  videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onFlashMediaBegin);
  onGetIsPlayingResult(videoPlayer.isPlaying());
}

function onFlashMediaBegin(event) {
  console.log(event);
  onGetIsPlayingResult(videoPlayer.isPlaying());
  onGetVideoDurationResult(videoPlayer.getVideoDuration(true));
}

Smart Player API を使用する場合のメソッドを下記のような形で用意します(メソッドやシンタックスもSmart Player API を使用したものにします)。

//////////////////////////
// HTML5 モード向け (Smart Player API を使用)
//////////////////////////
function onHTMLTemplateReady(event) {
  var TEMPLATE_READY = brightcove.api.events.ExperienceEvent.TEMPLATE_READY;
  experienceModule.removeEventListener(TEMPLATE_READY, onHTMLTemplateReady);
  console.log(event);
  videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  console.log(videoPlayer);
  videoPlayer.addEventListener(brightcove.api.events.MediaEvent.BEGIN, onHTMLMediaBegin);
  videoPlayer.getIsPlaying(onGetIsPlayingResult);
}

function onHTMLMediaBegin(event) {
  console.log(event);
  videoPlayer.getVideoDuration(true, onGetVideoDurationResult);
}

最後に、従来の API 及び Smart Player API 共通のメソッドを用意します。

//////////////////////////
// 共通
//////////////////////////
function onGetIsPlayingResult(playing) {
  console.log("playing: " + playing);
}

function onGetVideoDurationResult(duration) {
  console.log(duration);
}

</script>

上記のコードを実装することにより、Flash モードのプレーヤで動画を再生した場合のみ、プレーヤ右下にロゴが表示されるようになります。また、Flash モード及び HTML5 モードの両方において、ブラウザのデバッグコンソールに、API 実行時のログが出力されるようになります。

iOS では、[設定] ＞ [Safari] ＞ [詳細] にて、 「デバッグコンソール」を ON にすることで、ブラウザにデバッグコンソールが表示され、そこに、console.log でのログが出力されます。
Google Chrome では、[表示] ＞ [開発/管理] ＞ [デベロッパーツール]に、console.log でのログが出力されます。

なお、上記サンプルの動作はこちらで確認できます。また、サンプルコードはこちらからダウンロードできます。