Live SSAI を使用したクライアントサイドのプリロール広告

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

概要

Brightcove Player でサーバーサイド広告挿入（SSAI）を使用してライブストリームを配信する場合、クライアントサイドのプリロール広告を挿入できます。クライアントサイド広告については、この機能は IMA 広告をサポートします。

注意事項

この機能を使用するお客様は、Dynamic Delivery を使用している必要があります。
IMA および SSAI プラグインのみがサポートされます（FreeWheel はサポートされません）。
現在、この機能はページ上のシングルプレーヤーのみサポートしています。

開始方法

Live SSAI ストリームでクライアントサイドの IMA プリロール広告を再生するには、以下の手順に従います。

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

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

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

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

Brightcove プレーヤーを作成する

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

Brightcove Player バージョン 6.44.0 以降を使用する必要があります。

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

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

Players モジュールを開き、広告機能を追加したいプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
Overview タブで Advertising アコーディオンを開きます。
Enable Client-Side (IMA) トグルをオンにします。
IMA 広告タグの URL を入力します。この例では、サンプル広告タグ URL を使用します。

クライアントサイド広告を有効にする

プレーヤーの広告プロパティの詳細については、Players モジュールを使用したプレーヤー広告の設定を参照してください。
Enable Server-Side (SSAI) トグルをオンにします。

アカウントで SSAI が有効になっていない限り、サーバーサイドのオプションは表示されません。
Select Configuration ドロップダウンメニューから、このプレーヤーに関連付ける広告設定を選択します。
広告の上にオーバーレイを表示するには、Enable ad information overlays トグルをオンにします。これには「Learn More」および広告カウントダウンオーバーレイが含まれます。

SSAI を有効にする

ここで有効にして VAST 広告タグで設定するまで、オーバーレイは表示されません。
Overview タブで JSON Editor アコーディオンを開きます。
JSON エディタで、ad_failover: true プロパティが表示されるまで下にスクロールします。
ad_failover: true プロパティを次の内容に置き換えます。
```
"ima_preroll_with_ssai": true
```
プレーヤーを公開するには、Publish Changes をクリックします。
これで、ライブイベントを公開する準備が整いました。詳細については、Live モジュールでのサーバーサイド広告の実装を参照してください。

プレーヤーイベントのリッスン

この機能を使用する場合、IMA プリロール広告の前または途中でバインドされたプレーヤーイベントリスナーは、SSAI 再生開始前に再バインドが必要です。

ima_preroll_with_ssai 機能は、IMA3 広告の表示後にプレーヤーを破棄するように設計されています。その後、同じ ID を持つ別のプレーヤーが再初期化されます。このため、最初のプレーヤーではイベントがトリガーされません。

プレーヤーイベントリスナーが確実にトリガーされるようにするには、リスナーをプレーヤーの dispose イベントリスナーと、プレーヤー作成後に呼び出される videojs の setup フックでラップするのが妥当な回避策です。

コード例を以下に示します。

const playerId = 'samplePlayer';
    let player = videojs.getPlayer(playerId);

    // Add ad listeners here for events during IMA3 playback
    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) => {

        // Make sure the new player is the one being created by the ima_preroll_with_ssai feature
        if (newPlayer.id() !== playerId) {
          return;
        }

        player = newPlayer;

        // Add ad listeners here for events during SSAI playback
        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);
        });
      });
    });