はじめに
Brightcove Interactivity を使用すると、動画に次のような機能を持つアノテーションを追加できます。
- チャプター
- センチメント（評価）
- オーバーレイおよびコールトゥアクション
- アンケート
- 分岐
これらのアノテーションを機能させるには、使用している Brightcove Player に Interactivity Viewer プラグインを追加する必要があります。これは PLAYERS モジュールで行います。左側のナビゲーションから インタラクティブ機能 をクリックし、インタラクティブ機能の有効化 チェックボックスをオンにしてください。これにより、プラグインがインストールされます。
コードによる実装
通常は UI を使用してプラグインを読み込み、アノテーションを実装するケースが多いですが、プラグインを手動で読み込むこともできます。まず、プラグインコードを含めます。
<script src="https://players.brightcove.net/videojs-interactivity-viewer/2/videojs-interactivity-viewer.min.js">次に、以下のように呼び出して初期化します（ハイライト部分）。
<video-js id="myPlayerID"
data-account="1507807800001"
...</video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
<script>
videojs.getPlayer('myPlayerID').ready(function () {
var myPlayer = this;
myPlayer.interactivityViewer();
});
</script>このプラグインでは、追加でリンクする必要のある CSS はありません。
埋め込みコードの詳細
Brightcove Interactivity には、次の 3 種類の埋め込みコードがあります。
- プロジェクト
- テンプレート
- エクスペリエンス
それぞれで使用されるコードは大きく異なります。以下に詳細を示します。
プロジェクト
- iFrame:
&interactivityProjectId=64132eeb95e5ed0017610e83 - JavaScript:
data-interactivity-project-id="64132eeb95e5ed0017610e83"
テンプレート
テンプレートは動画自体に適用されるため、iframe コードや JavaScript コード内に Interactivity テンプレートへの参照は表示されません。
Experiences
- iFrame（Interactivity エクスペリエンスへの参照が多数含まれるため、ここではコードブロックを示します）:
<div style="position: relative; display: block; max-width: 100%;"> <div id="interactivity_embedded_experience_63fe5a64859355001da01044" style="padding-top: 56.255;"> <iframe src="https://player.interactivity.brightcove.com/latest/experience/f04531eb8a6849dfbc1c480fb8ed7507?embed_experience=true" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;"></iframe> </div> </div> <script type="application/javascript" src="https://player.interactivity.brightcove.com/latest/embedded_experience.js"></script> - ランディングページ:
https://player.interactivity.brightcove.com/latest/experience/f04531eb8a6849dfbc1c480fb8ed7507