SSAI と Brightcove ウェブ & スマートTV SDK の統合

概要

SSAI（Server-Side Ad Insertion）は、サーバーサイドで動画ストリームに広告を挿入し、視聴者にシームレスな広告体験を提供します。 このガイドでは、API を使用して SSAI を実装する手順について説明します。

前提条件

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

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

• 広告設定を作成していること。

使用例

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

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

2. Brightcove SDK から SSAI 統合クラスのインポート。

   import { SsaiIntegrationFactory } from '@brightcove/web-sdk/integrations/ssai';
               

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

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

4. SSAI統合の設定。

   IntegrationsManager.registerSsaiIntegrationFactory(SsaiIntegrationFactory);
               

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

   const player = new Player({accountId:'<account-id>'});
   
    player.updateConfiguration({
      brightcove: {
        // Passing an Ad Config ID will enable the fetching of an SSAI stream from the Playback API
        adConfigId: '<valid-ad-config-id>',
      },
      ssai: {
        timeout: 30_000,
        hideOverlays: false,
        // etc
      }
    });

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

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

7. IntegrationsManager を介して SSAI Integration API にアクセスします。

   const { ssaiIntegration } = player.getIntegrationsManager();
               

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

   ssaiIntegration.seekInRelativeTime(50);
               

設定の概要

このセクションでは、ウェブ & スマートTV SDKを使用する際にサーバーサイド広告挿入（SSAI）で利用可能なさまざまな設定オプションに関する詳細情報を提供します。

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

イベントの概要

エラーの概要