Video Cloud 新機能: Overlay API - プレーヤ上でのインタラクションが可能に

Brightcove Video Cloud では、毎月1回、新たな複数の機能をリリースしています。

今回は、今月リリースされた機能のひとつである、Overlay API をご紹介します。

Overlay API を使用することで、プレーヤ上に画像、テキスト、ボタンなどのさまざまなエレメントをオーバーレイ表示させることができることに加え、プレーヤ上のインタラクションを実装できます。

例えば、独自のクローズドキャプションや、Facebook/Twitter 共有機能の実装、動画内で紹介中の商品購入ボタンを実装することによるEC サイトとの連携など、さまざまな使い方が考えられます。

Overlay API は、PC や Mac などの Flash Player がインストールされている端末向け(Flash モード)では、ActionScript で使用し、SWF プラグインとしてプレーヤに実装し、iPhone や iPad などの Flash Player が存在しない端末向け(HTML5 モード)には、JavaScript で使用し、JavaScript プラグインとしてプレーヤに実装します。

特に、HTML5モードでは、プレーヤ上に独自のエレメントを表示することは困難であったという意味では、この Overlay API のリリースは、プレーヤのカスタマイズの可能性を大きく広げます。

まずは、Overlay API 入門ということで、"HTML5 モードのみで動作する簡単なサンプル"を作成してみました。このサンプルでは、App Cloud の紹介動画を流し、動画停止時に App Cloud トライアルアカウント作成ボタンを表示し、視聴者がそのボタンをクリックした際に App Cloud の紹介ページへユーザを誘導するといったことを実装しています。

サンプルコード:

(function() {

function onPlayerReady() {
//オーバーレイブロックを作成する
overlay = videoPlayer.overlay();

//動画再生開始及び停止のイベントをリッスンする
videoPlayer.addEventListener(brightcove.api.events.MediaEvent.STOP, mediaStopHandler);
videoPlayer.addEventListener(brightcove.api.events.MediaEvent.PLAY, mediaBeginHandler);

//ボタンにクリックイベントをアタッチする
$(myButton).click(onButtonClick);

//ボタンの配置位置を定義する
$(myButton).css({
position: 'absolute',
top: '10px',
left: '10px',
});

//オーバーレイブロックにボタンを追加する
overlay.appendChild(myButton);
}

function mediaBeginHandler(e) {
//動画再生中は、オーバーレイ表示しているボタンを隠す
$(myButton).hide();
}

function mediaStopHandler(e) {
//動画が停止状態の場合、オーバーレイ表示しているボタンを表示する
$(myButton).show();
}

function onButtonClick(){
//ボタンクリック時に別ウィンドウでサイトを表示する
window.open("http://www.brightcove.com" , "_blank");
}

var content,overlay,myButton;

//プレーヤ及び必要なモジュールへの参照を作成する
player = brightcove.api.getExperience();
videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
experience = player.getModule(brightcove.api.modules.APIModules.EXPERIENCE);
content = brightcove.api.getExperience('myExperience').getModule('content');

//画像を表示するためのエレメントを作成する
myButton = document.createElement('div');
myButton.id = "myButton";
myButton.innerHTML = '<img id="createTrial" src="http://dev.brightcove.co.jp/nori/blog/img/TrialButton.png" />';

//プレーヤの準備ができているか(ロードが完了したか)を確認し、onPlayerReady()を呼び出す
if (experience.getReady()) {
onPlayerReady();
} else {
experience.addEventListener(brightcove.player.events.ExperienceEvent.TEMPLATE_READY, onPlayerReady);
}
}());

このサンプル動作は、http://dev.brightcove.co.jp/nori/blog/htmlOverlay.html にて確認できます。
(iPad や Flash Player が搭載されていない Android (タブレット)端末でご確認ください。)

このサンプルで使用している JavaScript ファイルは、こちらからダウンロードできます。
htmlOverlay.js を 任意の Web サーバ上に配置し、htmlOverlay.js への URL を、Video Cloud スタジオの[Publishing モジュール]の[プレーヤ設定] > [プラグイン] 項目に入力する事で、任意のプレーヤでこのサンプルのプラグインを使用できます。

[注意点]

  • プレーヤがフルスクリーンモードの場合、プレーヤ上にボタンは表示されません。
  • Chromeless Video Player 形式のプレーヤでは、iOS のネイティブプレーヤがクリックイベントをキャプチャするため、該当のボタンをクリックできません。このサンプルの JavaScript プラグインは、Video Player 形式のプレーヤでお試しください。

その他、こちらのマニュアル(翻訳中のため英語)に詳細が記載されています。このマニュアルでは、ActionScript でのサンプルコードや、もう少しカッコいい実装のサンプルもダウンロードできます。