开始在 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.durationstreamEvent.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>

接下来,创建一个视频播放器封装容器类,以启动和控制 dash.js 播放器。