在 HbbTV 上使用 IMA SDK

IMA DAI SDK 支援整合至最小 HbbTV 影片播放器應用程式。IMA DAI SDK 可讓 Google Ad Manager 針對寬頻廣告串流，配合廣播內容串流。本指南將說明如何根據廣播串流中的廣告事件資料，載入廣告資訊清單。

如要查看或瞭解完整的整合範例，請下載採用 IMA HTML5 DAI SDK 的 HbbTV 線性範例應用程式。為支援舊版電視裝置，本指南和 GitHub 範例應用程式均採用 ES5 JavaScript。

如要進一步瞭解如何整合其他非 HbbTV 平台，請參閱「互動式媒體廣告 SDK」。

必要條件

繼續閱讀本指南前，請確認您具備下列項目：

  • 如要使用 IMA DAI，您必須擁有 Ad Manager 360 Advanced 帳戶。如果您有 Ad Manager 帳戶，請與客戶經理聯絡以瞭解詳情。如要瞭解如何註冊 Ad Manager，請前往 Ad Manager 說明中心。
  • 一個 HbbTV 應用程式與媒體播放的廣播物件互動。詳情請參閱 HbbTV Broadcast AV 物件。
  • 支援預先載入的 dash.js 版本。建議您使用 4.6.0 以上版本。
  • 代管應用程式的網路伺服器。
  • 含有 DVB 廣播串流的測試環境。如需設定測試環境的詳細操作說明，請參閱「執行 HbbTV 應用程式」。
    • 廣播串流：準備含有自訂應用程式資訊表 (AIT) 資料的廣播串流。您也需要一種方法，才能將廣播串流傳送至電視接收。您可以使用 DVB 調變器傳送廣播串流，或使用其他方法。
    • 網路伺服器：在電視可存取的網路伺服器上代管 HbbTV 應用程式。
  • 直播活動的類型為「Pod 放送資訊清單」。如要建立活動，請參閱「為動態廣告插播設定直播活動」。

建立相容的廣播串流

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 傳輸串流範例。如要使用範例串流，您必須更新應用程式資訊表的網址，以便設定自己的串流。

建立用於直播事件的廣告群組

如要向 HbbTV 應用程式放送廣告，您需要廣告連播放送直播活動。如要瞭解如何設定事件，請參閱「為 DAI 設定直播」一文。如要存取您設定的串流，應用程式必須具備下列變數：

  • NETWORK_CODE：用於要求廣告的 Ad Manager 聯播網代碼。
  • CUSTOM_ASSET_KEY：在設定 DAI 直播時產生的 Ad Manager 自訂素材資源金鑰。

建立應用程式檔案結構

本指南使用的檔案結構與 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 後端的互動情形。串流管理員也會處理追蹤連線偵測 (ping)，並將串流和廣告事件轉送至發布商。

如需設定測試環境的詳細操作說明，請參閱執行 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 播放器。

下一頁
設定玩家類別