IMA クライアントサイドと Brightcove ウェブ & スマートTV SDK の統合

概要

IMA クライアントサイドにより、Brightcove ウェブ & スマートTV SDK で構築したメディア プレーヤーに動画広告を簡単に統合できます。 IMA3 統合により、プリロール、ミッドロール、ポストロール広告の配置や、洗練された広告管理機能が容易になります。

前提条件

• Video Cloud にアクセスできる Brightcove アカウントを持っていること。

• プロジェクトにインストールされている Brightcove ウェブ & スマートTV SDK。

• Google IMA SDK リソースと Ad Manager アカウントへのアクセスできること。

使用例

1. Brightcove SDK から Player (with UI) クラスのインポート

   import { Player, IntegrationsManager } from '@brightcove/web-sdk/ui';
               

2. Brightcove SDK から IMA クライアントサイド統合クラスのインポート

   import { ImaClientSideIntegrationFactory } from '@brightcove/web-sdk/integrations/imaClientSide';
               

3. Brightcove SDK から ImaClientSide 統合 CSS のインポート

   import '@brightcove/web-sdk/integrations/imaClientSide/styles';
               

4. IMA クライアントサイド統合の設定

   IntegrationsManager.registerImaClientSideIntegrationFactory(ImaClientSideIntegrationFactory);
               

5. プレーヤーの作成と設定

   const player = new Player({accountId:'<account-id>'});
   
    player.updateConfiguration({
      integrations: {
        imaClientSide: {
          serverUrl: '<ad-tag-url>',
          requestMode: 'onload',
          hardTiemouts: false,
          // etc
        },
      },
    });

6. プレーヤーをマウント ルート（ページ内の DOM 要素）にアタッチします:

   const root = document.querySelector('#player-mount-root');
    player.attach(root);
               

7. IntegrationsManager を使って IMA Client Side Integration API にアクセスします。:

   const { imaClientSideIntegration } = player.getIntegrationsManager();
               

8. CSAI 固有のメソッドを呼び出し

   imaClientSideIntegration.isVpaid();
               

設定の概要

このセクションでは、ウェブ & スマートTV SDK を使用する際にクライアントサイド広告挿入（CSAI）で利用可能なさまざまな設定オプションについて詳しく説明します。

パブリック メソッドの概要

イベントの概要

エラーの概要