开始在 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 或更高版本。
  • 用于托管应用的 Web 服务器。
  • 包含 DVB 广播流的测试环境。如需详细了解如何设置测试环境，请参阅 运行 HbbTV 应用。
    • 广播流：准备一个包含自定义 应用信息表 (AIT) 数据的广播流。您还需要一种方法来传输广播流，以便电视接收。您可以使用 DVB 调制器或其他方法来传输广播流。
    • Web 服务器：在 电视可以访问的 Web 服务器上托管 HbbTV 应用。
  • 类型为广告连播投放清单 的直播活动。如需创建活动， 请参阅 设置 DAI 直播。

创建兼容的广播流

您的 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://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 播放器。

下一页
设置 Player 类