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

概要

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

注意事項

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

はじめに

ライブ SSAI ストリームでクライアント側の IMA プレロール広告を再生するには、次の手順に従います：

1. SSAI が有効なライブストリームを作成する
2. Brightcove プレーヤーを作成する
3. Studio を使用してクライアント側のプレロールを実装する

SSAI が有効なライブストリームの作成

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

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

Brightcove プレーヤーの作成

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

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

Studio を使用したクライアント側のプレロールの実装

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

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

   

   プレーヤーの広告プロパティの詳細については、Players モジュールを使用したプレーヤー広告の設定ドキュメントを参照してください。

6. Enable Server-Side (SSAI) トグルをオンにします。

7. Select Configuration ドロップダウンメニューから、このプレーヤーに関連付けたい広告設定を選択します。
8. 広告の上にオーバーレイを表示したい場合は、Enable ad information overlays トグルをオンにします。これには「Learn More」と広告カウントダウンのオーバーレイが含まれます。

   

9. Overview タブの JSON Editor アコーディオンを開きます。

10. JSON エディターで、ad_failover: true プロパティが見つかるまでスクロールします。

11. ad_failover: true プロパティを以下に置き換えます：

    "ima_preroll_with_ssai": true
    

12. プレーヤーを公開するには、Publish Changes をクリックします。
13. これでライブイベントを公開する準備ができました。詳細については、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);
        });
      });
    });