ライブ SSAI を使用したクライアント側のプレロール広告

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

概要

Brightcove Player を使用してサーバーサイド広告挿入 (SSAI) が有効なライブストリームを配信する場合、クライアント側のプレロール広告を挿入できます。クライアント側の広告では、この機能は IMA 広告をサポートします。

注意事項

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

開始方法

ライブ 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);
        });
      });
    });