Smart Player APIを使う

(すべてのエディションで利用頂けます)

2011年11月のリリースで、Smart Player APIという新機能がリリースされました。
従来のPlayer APIは、Video CloudのプレイヤーをFlashで表示しているときのみ利用可能でした。ただ、近頃はiOS環境(HTML5環境)での動画再生も増えてきており、そのようなHTML5環境で再生しているときもプレイヤーに対してAPIで操作を行いたい、という要望が増えてきました。
そのような要望にお応えできるのがSmart Player APIです。

Smart Player APIは、Flash環境とHTML5環境のVideo Cloudプレイヤー対して同じ形式のAPIをJavaScriptで提供します。そのため、一度JavaScriptでAPI呼び出しコードを書いてしまえば、それが自動的にFlash環境とHTML5環境に対応になります。他社の場合は、Flash環境とHTML5環境のそれぞれに対してAPIの開発をしないといけなかったり、そもそもHTML環境ではAPIが使えないと言うこともありますので、APIを利用する開発者にとっては大きなメリットであると言えるでしょう。

Smart Player APIの利用方法は以下の通りです。
■1) Video Cloud管理画面のプレイヤー設定でPlayer APIを有効にする
従来のPlayer API同様、管理画面でAPIを有効にしておく必要があります。

■2) プレイヤーのWebサイト埋め込みコードにSmart Player APIを利用するためのコードを追加する
includeAPIとtemplateLoadHandlerという2つのパラメーターを追加すると、Smart Player APIが利用可能になります。
includeAPIは、Smart Player APIをONにするスイッチです。
templateLoadHandlerは、プレイヤーの準備が出来た際に呼び出されるコールバック関数の名前を指定します。プレイヤーのAPIの準備が出来ると、templateLoadHandlerに指定した値(以下の例の場合はmyTemplateLoaded)の関数が呼び出されます(従来のPlayer APIで言うところのonTemplateLoadedに相当する動きです)。『myTemplateLoaded』というコールバック関数名は自由に設定出来ます。
コード例は以下の通りです。
========================================
<script type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.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="123456" />
  <param name="isVid" value="true" />
  <param name="dynamicStreaming" value="true" />
  <param name="@videoPlayer" value="22552516002" />
  <param name="includeAPI" value="true" />
  <param name="templateLoadHandler" value="myTemplateLoaded" />

</object>
========================================

■3) コールバック関数でプレイヤーAPIの呼び出しを行う
(2)の手順で指定したmyTemplateLoadedの中身を記述します。記述する内容は、従来のPlayer APIとさほど変わりません。
コード例は以下の通りです。
========================================
<script type="text/javascript">
var modVP;
var modExp;
var modCon;

function myTemplateLoaded(experienceID) {
  // player変数に、プレイヤーへの参照を代入する
  player = brightcove.api.getExperience(experienceID);

  // プレイヤー内のそれぞれのモジュールへのアクセスを取得する
  modVP = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
  modExp = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);

  //プレイヤーの準備が終わるまで待つ。終わったらTEMPLATE_READYイベントが発生する
  modExp.addEventListener(brightcove.api.events.ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}

function onTemplateReady(){
  //プレイヤーに対してAPIでの操作が可能な状態になった。
  //例として、現在プレイヤーに割り当てられている動画の長さを取得する
  modVP.getVideoDuration(true, durationCallback);
}

function durationCallback(pResult){
alert(pResult)
}
</script>
========================================

このように、Flash環境でもHTML5環境でも対応できるSmart Player APIですが、いくつか注意点があります。
まず、プレイヤーから値を取得するような動作については、非同期呼び出しが基本となります。上の例のように、動画の尺を取得したい場合でも非同期呼び出しとなります。
次に、従来のPlayer APIの一部機能(例えば広告系のAPI)については、現在の所Smart Player APIでは提供を行っていません。こちらは、今後提供していく予定ですが、そのような機能を利用したい場合は従来のPlayer APIを利用頂く必要があります。

最後に、Smart Player API関係の情報は、以下のようなページに記載があります(現在の所、英語での提供となっております)。