独自のロゴオーバーレイを実装する

Brightcove News

Video Cloud では Media モジュールで各ビデオに個別にロゴオーバーレイを設定することができます。

またアカウント設定でアカウント内の全てのビデオに共通のロゴオーバーレイの設定も行うことができます。

.png)

これらの方法では固定のロゴの設定のみが可能ですが、プレーヤー API を用いるとプログラムで制御可能な独自のロゴオーバーレイを設定することができます。そこで今回はプレーヤー API を用いて動的にロゴの表示を切り替える方法をご紹介します。

ロゴオーバーレイの属性には以下の 2 つがあります。

ロゴ画像の所在を示す URL（画像 URL）
ロゴをクリックした時の遷移先の URL（クリックスルー URL）

これらをプログラムで変更するとことによりロゴオーバーレイを変更することができます。

これから示す例ではビデオ再生の最初の 3 秒と最後の 3 秒にのみロゴオーバーレイを表示します。2 つ目のロゴオーバーレイを表示する際、画像 URL とクリックスル― URL を変更させます。

サンプルはここから参照できます。

STEP 1

事前に、利用するプレーヤーで JavaScriptAPI が有効になるようにしておきます。
Video Cloud 管理画面のプレーヤー設定で「ActionScript/JavaScriptAPI を有効にする」にチェックをします。

STEP 2

HTML 内で以下の JavaScript を読み込みます。

STEP 3

最初の 3 秒に表示するロゴオーバーレイと最後の 3 秒に表示するロゴオーバレイのそれぞれの画像の URL とクリックスルー URL を「長い説明」フィールドに設定します。簡単に JavaScript オブジェクトに変換できるように以下の様にあらかじめ JSON 文字列で設定します。

{"imageStart" : "http://files.brightcove.com/BCL-Training-Logo-small.png" , "urlStart" : "http://support.brightcove.com/en/training-videos" , "imageEnd" : "http://files.brightcove.com/BCLapp-cloud-small.png" , "urlEnd" : "http://www.brightcove.com/en/content-app-platform"}

imageStart - 最初の 3 秒に表示するロゴオーバーレイの画像 URL
urlStart - 最初の 3 秒に表示するロゴオーバーレイのクリックスルー URL
imageEnd - 最後の 3 秒に表示するロゴオーバーレイの画像 URL
urlEnd - 最後の 3 秒に表示するロゴオーバーレイのクリックスルー URL

STEP 4

TEMPLATE_READY イベントハンドラでは、プレーヤーのレイアウトの参照を取得するため Video Player モジュールの getContainer() メソッドを呼び出します。
そして、appendChild() メソッドでイメージコンポーネントを追加します。

BCL.videoPlayer = BCL.player.getModule(APIModules.VIDEO_PLAYER); BCL.layout = BCL.videoPlayer.getContainer(); BCL.layout.appendChild("");

STEP 5

STEP 4 で新たに追加したイメージコンポーネントに対して画像 URL とクリックスルー URL を設定します。
まず JSON.parse() を使い「長い説明」内の文字列を imageStart, urlStart, imageEnd, urlEnd のプロパティをもつオブジェクトに変換します。
その後 setSource() メソッドと setURL() メソッドを使ってそれぞれ画像 URL とクリックスルー URL を設定します。
ここでは最初のロゴオーバーレイ用のデータ imageStart, urlStart をそれぞれ setSource() メソッドと setURL() メソッドを使って設定します。

BCL.overlayImage = BCL.layout.getChildAt(1);

BCL.imageData = JSON.parse(BCL.videoPlayer.getCurrentVideo().longDescription);

BCL.overlayImage.setSource(BCL.imageData.imageStart); BCL.overlayImage.setURL(BCL.imageData.urlStart);

STEP 6

TEMPLATE READY イベントハンドラの最後に MEDIA_STOP と MEDIA_PROGRESS イベント用リスナーを設定します。その後、ビデオを再生します。

BCL.videoPlayer.addEventListener(BCMediaEvent.PROGRESS, BCL.onMediaProgress); BCL.videoPlayer.addEventListener(BCMediaEvent.STOP, BCL.onMediaStop); BCL.videoPlayer.play();

STEP 7

PROGRESS イベントハンドラでは現在の再生位置とビデオの尺の値の入ったオブジェクトが渡されます。
簡単な if 分岐で最初の 3 秒と最後の 3 秒だけロゴが表示されるようにします。また最後の 3 秒では「長い説明」から取得した imageEnd と urlEnd を使って画像 URL とクリックスルー URL を上書きします。

BCL.onMediaProgress = function(event) { if (event.position < 3) { BCL.overlayImage.setVisible(true); } else if ((event.duration - event.position) < 3) { BCL.overlayImage.setSource(BCL.imageData.imageEnd); BCL.overlayImage.setURL(BCL.imageData.urlEnd); BCL.overlayImage.setVisible(true); } else { BCL.overlayImage.setVisible(false); } }

再生を停止しているときはロゴを表示したいので、STOP イベントではロゴを表示するようにします。

BCL.onMediaStop = function(event) {
    BCL.overlayImage.setVisible(true);
}

以下に完全なコードを記載します。

いかがでしたでしょうか。
イメージコンポーネントを動的に追加することでロゴオーバーレイの表示領域を動的に追加することができることができます。
また、イメージコンポーネントの setSource() メソッド、setURL() メソッド、setVisible() メソッドを呼び出すことで画像 URL やクリックスルー URL の変更、またロゴオーバーレイ自体の表示・非表示ができることも理解できたかと思います。

これを元に皆さんオリジナルのロゴオーバーレイを作成してみてください。