クライアントサイドのプリロール広告とライブ SSAI の併用

このトピックでは、Brightcove プレーヤーを使用して、サーバーサイド広告挿入（SSAI）が有効なライブストリームにクライアントサイドのプリロール広告を再生する方法について解説します。

概要

Brightcove プレーヤーを使用してサーバーサイド広告挿入（SSAI）によるライブストリームを配信する際に、クライアントサイドのプリロール広告を挿入することができます。クライアントサイド広告については、IMA 広告がサポートされています。

注意事項

この機能を使用するには、Dynamic Delivery の利用が必要です。
サポートされているのは IMA および SSAI プラグインのみです（FreeWheel は未対応）。
現在、この機能はページ上に 1 つのプレーヤーのみサポートしています。

はじめに

クライアントサイドの IMA プリロール広告をライブ SSAI ストリームとともに再生するには、以下の手順に従ってください：

SSAI 対応のライブストリームを作成する
Brightcove プレーヤーを作成する
Studio を使用してクライアントサイドのプリロールを実装する

SSAI 対応のライブストリームを作成する

Live モジュールでは、サーバーサイド広告挿入（SSAI）に対応しており、ライブストリーム中にサーバーサイド広告をリクエスト・表示することができます。ライブストリームの作成方法については、以下を参照してください：

Live モジュールでのサーバーサイド広告の実装

Brightcove プレーヤーを作成する

Players モジュールを使用して新しい Brightcove プレーヤーを作成します。詳細は、クイックスタート：プレーヤーの作成とスタイリングを参照してください。

Brightcove プレーヤーのバージョンは 6.44.0 以降を使用する必要があります。

Studio を使用してクライアントサイドのプリロールを実装する

プレーヤーで自動フェイルオーバー広告を設定する最も簡単な方法は、Studio を使用することです。広告設定とプレーヤーを作成したら、以下の手順で自動フェイルオーバーの設定を行います：

Players モジュールを開き、広告機能を追加したいプレーヤーを探します。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
左側のナビゲーションメニューから広告をクリックします。
Enable Client-Side (IMA) チェックボックスをオンにします。
IMA 広告タグの URL を入力します。この例では、サンプルの広告タグ URL を使用します。

クライアントサイド広告の有効化

プレーヤーの広告設定の詳細については、Players モジュールを使用したプレーヤー広告設定を参照してください。
サーバーサイド（SSAI）の有効化 チェックボックスをオンにします。

アカウントが SSAI に対応していない場合、このサーバーサイドオプションは表示されません。
設定の選択 ドロップダウンメニューから、このプレーヤーに関連付けたい広告設定を選択します。
広告の上にオーバーレイを表示したい場合は、広告情報オーバーレイの有効化 チェックボックスをオンにします。これには「詳細を見る」や広告のカウントダウンのオーバーレイが含まれます。

SSAI の有効化

ここで有効にして、VAST 広告タグで設定しないと、オーバーレイは表示されません。
保存ボタンをクリックします。
左側のナビゲーションメニューから JSON エディター をクリックします。
JSON エディター内で ad_failover: true プロパティが表示されるまでスクロールします。

広告フェイルオーバープロパティ
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);
              });
            });
          });