在 HbbTV 上使用 IMA SDK

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

如要查看或跟著完成範例整合，請下載 HbbTV 線性範例應用程式，其中包含 IMA HTML5 DAI SDK。為支援舊版電視裝置，本指南和 GitHub 範例應用程式採用 ES5 JavaScript。

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

必要條件

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

  • 如要使用 IMA DAI，您必須擁有 Ad Manager 360 進階版帳戶。如果您有 Ad Manager 帳戶，請與客戶經理聯絡，瞭解詳情。如要瞭解如何註冊 Ad Manager，請前往 Ad Manager 說明中心。
  • 與廣播物件互動的 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"}

如要傳送這類事件，請在 JSON 字串酬載中加入 streamEvent.type。如要支援廣告預先載入，AD_BREAK_EVENT_ANNOUNCE 事件必須包含 streamEvent.duration 和 streamEvent.offset。詳情請參閱「監聽 HbbTV 串流事件」。如要設定廣播串流，請參閱多工 MPEG 傳輸串流範例。如要使用範例串流，請更新應用程式資訊表網址，以設定自己的串流。

建立播客直播活動

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

  • 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://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<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>

接下來，請建立影片播放器包裝函式類別，以啟動及控制 dash.js 播放器。

下一頁
設定玩家類別