HbbTV 向け IMA SDK スタートガイド

IMA DAI SDK は、最小限の HbbTV 動画プレーヤー アプリに統合できます。IMA DAI SDK を使用すると、Google アド マネージャーによるブロードバンド広告ストリームのデマンドをブロードキャスト コンテンツ ストリームに付随させることができます。このガイドでは、ブロードキャスト ストリームの広告イベントデータに基づく広告マニフェストの読み込みについて説明します。

統合が完了したサンプルを表示または利用するには、IMA HTML5 DAI SDK を含む HbbTV Linear のサンプルアプリをダウンロードしてください。古いテレビ デバイスをサポートするため、このガイドと GitHub のサンプルアプリは ES5 JavaScript で記述されています。

HbbTV 以外の他のプラットフォームとの統合について詳しくは、Interactive Media Ads SDK をご覧ください。

前提条件

このガイドに進む前に、次のことを確認してください。

  • IMA DAI を使用するには、アド マネージャー 360 アドバンスト アカウントが必要です。アド マネージャー アカウントをお持ちの場合は、アカウント マネージャーに詳細をお問い合わせください。アド マネージャーへのお申し込みについて詳しくは、アド マネージャー ヘルプセンターをご覧ください。
  • メディア再生のためにブロードキャスト オブジェクトを操作する HbbTV アプリ。詳細については、HbbTV ブロードキャスト AV オブジェクトをご覧ください。
  • プリロードをサポートする dash.js バージョン。バージョン 4.6.0 以降を使用することをおすすめします。
  • アプリケーションをホストするウェブサーバー。
  • DVB ブロードキャスト ストリームを使用したテスト環境。テスト環境の設定手順については、HbbTV アプリケーションの実行をご覧ください。
    • ブロードキャスト ストリーム: カスタム アプリケーション情報テーブル（AIT）データを含むブロードキャスト ストリームを準備します。また、テレビで受信できるようにブロードキャスト ストリームを送信する方法も必要です。DVB モジュレータを使用してブロードキャスト ストリームを送信できます。
    • ウェブサーバー: テレビからアクセスできるウェブサーバーで HbbTV アプリケーションをホストします。
  • タイプが 連続広告配信マニフェストのライブ配信イベント。イベントを作成するには、ダイナミック広告挿入用のライブ配信を設定するをご覧ください。

互換性のあるブロードキャスト ストリームを作成する

HbbTV アプリは broadcastContainer.addStreamEventListener() を使用して、ブロードキャスト ストリーム内の HbbTV ストリーム イベントをリッスンします。広告を適切に読み込んで再生するには、関連する JSON 文字列ペイロードを含めるように、次のイベントタイプを使用してブロードキャスト ストリームを設定する必要があります。

  • AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
  • AD_BREAK_EVENT_START～{"type":"adBreakStart"}
  • AD_BREAK_EVENT_END～{"type":"adBreakEnd"}

これらのイベントには、streamEvent.type を含む JSON 文字列ペイロードを含めます。広告プリロードをサポートするには、AD_BREAK_EVENT_ANNOUNCE イベントに streamEvent.duration と streamEvent.offset を含める必要があります。詳細については、HbbTV ストリーム イベントをリッスンするをご覧ください。ブロードキャスト ストリームを設定するには、マルチプレックスされた MPEG トランスポート ストリームの例をご覧ください。サンプル ストリームを使用するには、独自のストリーム設定のアプリケーション情報テーブルの URL を更新する必要があります。

ライブ配信イベントを提供する Pod を作成する

HbbTV アプリに広告を配信するには、ライブ配信イベントを配信するポッドが必要です。イベントの設定については、ダイナミック広告挿入用のライブ配信を設定するをご覧ください。設定したストリームにアクセスするには、アプリに次の変数が必要です。

  • NETWORK_CODE: 広告をリクエストするためのアド マネージャー ネットワーク コード。
  • CUSTOM_ASSET_KEY: DAI のライブ配信を設定するプロセス中に生成されるアド マネージャーのカスタム アセットキー。

アプリケーションのファイル構造を作成する

このガイドでは、IMA HbbTV サンプルアプリに似たファイル構造を使用します。このガイドの手順に沿って操作するには、次のファイルを作成してください。

  • index.html: アプリの HTML インデックス。
  • Style.css: アプリの CSS スタイル設定。
  • application.js: JS のメイン エントリ ポイント。再生ステータスとミッドロール挿入点を管理します。
  • video_player.js: 広告の再生に使用される dash.js プレーヤーを管理します。
  • ads_manager.js: IMA の設定、ストリーム リクエスト、イベント処理を管理します。

ads_manager.js は IMA DAI SDK を設定します。次のコンポーネントは IMA DAI SDK を実装しています。

  • PodStreamRequest: Google の広告サーバーのストリーム リクエストを定義するオブジェクト。
  • StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのやり取りを処理するオブジェクト。ストリーム マネージャーは、トラッキング ピングも処理し、ストリーム イベントと広告イベントをパブリッシャーに転送します。

テスト環境の設定手順について詳しくは、HbbTV アプリケーションの実行に関するガイドをご覧ください。

IMA DAI SDK と DASH.js を読み込む

ブロードキャスト広告ストリームの再生を開始するには、IMA DAI SDK と dash.js をアプリに読み込みます。application.js タグの前に、index.html でスクリプトタグを使用して dash.js と IMA フレームワークを追加します。

<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

次に、dash.js プレーヤーを開始して制御する動画プレーヤー ラッパー クラスを作成します。

次へ
プレーヤー クラスを設定する