概要
Brightcove Player を使用してサーバーサイド広告挿入（SSAI）を適用したライブストリームを配信する際、クライアントサイドのプリロール広告を挿入できます。クライアントサイド広告としては、IMA 広告がサポートされています。
注意事項
- この機能を使用する場合、Dynamic Delivery を使用している必要があります。
- サポートされるのは IMA と SSAI プラグインのみです（FreeWheel はサポートされません）。
- 現在、この機能はページ上の単一のプレーヤーにのみ対応しています。
開始方法
ライブ SSAI ストリームでクライアントサイドの IMA プリロール広告を再生するには、次の手順に従います:
SSAI 対応のライブストリームを作成する
Live モジュールはサーバーサイド広告挿入（SSAI）をサポートしており、ライブストリーム中にサーバーサイド広告をリクエストして表示できます。ライブストリームを作成するには、以下を参照してください:
Brightcove プレーヤーを作成する
Players モジュールを使用して新しい Brightcove プレーヤーを作成します。詳細については、クイックスタート: プレーヤーの作成とスタイル設定を参照してください。
Brightcove Player バージョン 6.44.0 以降を使用する必要があります。
Studio を使用したクライアントサイドのプリロール実装
Studio を使用することで、プレーヤーを自動フェイルオーバー広告用に設定する最も簡単な方法が利用できます。広告設定とプレーヤーを作成したら、以下の手順でプレーヤーを自動フェイルオーバーに設定できます:
- Players モジュールを開き、広告機能を追加したいプレーヤーを探します。
- プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
- 左側のナビゲーションメニューで 広告 をクリックします。
- クライアント サイド（IMA）の有効化 チェックボックスをオンにします。
- IMA Ad Tag の URL を入力します。この例では、サンプルの Ad Tag URL を使用します。
クライアントサイド広告を有効化 プレーヤー広告プロパティの詳細については、Players モジュールを使用したプレーヤー広告設定を参照してください。
-
サーバー サイド（SSAI）の有効化 チェックボックスをオンにします。
- 設定の選択 ドロップダウンメニューから、このプレーヤーに関連付けたい広告設定を選択します。
- 広告の上にオーバーレイを表示したい場合は、広告情報オーバーレイの有効化 チェックボックスをオンにします。これには「Learn More」やカウントダウンのオーバーレイが含まれます。
SSAI を有効化 - 保存 ボタンをクリックします。
- 左側のナビゲーションメニューで JSON エディタ をクリックします。
-
JSON エディタでスクロールし、
ad_failover: trueプロパティを探します。
Ad failover プロパティ ad_failover: trueプロパティを次の内容に置き換えます:"ima_preroll_with_ssai": true- JSON エディタは次のように表示されるはずです:
IMA プリロールプロパティ - をクリックします。
- プレーヤーを公開するには、 > 変更の公開 をクリックします。
- これでライブイベントを公開する準備が整いました。詳細については、Live モジュールでのサーバーサイド広告の実装を参照してください。
プレーヤーイベントのリッスン
この機能を使用する場合、IMA プリロール広告の前または再生中にバインドされたプレーヤー イベントリスナーは、SSAI 再生が開始される前に再度バインドする必要があります。
ima_preroll_with_ssai 機能は、IMA3 広告の表示後にプレーヤーを破棄し、その後同じ ID を持つ別のプレーヤーを再初期化するように設計されています。そのため、最初のプレーヤーではイベントがトリガーされません。
プレーヤー イベントリスナーが確実にトリガーされるようにするための現実的な回避策として、プレーヤーの dispose イベントリスナーと、プレーヤー生成後に呼び出される videojs の setup フックの中にイベントリスナーをラップする方法があります。
以下はコード例です:
const playerId = 'samplePlayer';
let player = videojs.getPlayer(playerId);
// IMA3 再生中のイベント用広告リスナーをここに追加
player.on("ads-ad-started", function (evt) {
player.log("IMA3: ads-ad-started! ", evt);
});
player.on("ads-ad-ended", function (evt) {
player.log("IMA3: ads-ad-ended! ", evt);
});
player.on('dispose', () => {
videojs.hook('setup', (newPlayer) => {
// ima_preroll_with_ssai 機能によって作成された新しいプレーヤーかどうか確認
if (newPlayer.id() !== playerId) {
return;
}
player = newPlayer;
// SSAI 再生中のイベント用広告リスナーをここに追加
player.on("ads-ad-started", function (evt) {
player.log("SSAI:ads-ad-started! ", evt);
});
player.on("ads-ad-ended", function (evt) {
player.log("SSAI: ads-ad-ended! ", evt);
});
player.on("bcov-ssai-click-through", function (evt) {
player.log("SSAI: bcov-ssai-click-through! ", evt);
});
});
});