构建应用类
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在 application.js
中,为与 HbbTV 广播互动的 HbbTV 应用创建主类。此类与 broadcastAppManager
和 broadcastContainer
进行交互。如需查看类似类的示例,请参阅处理广播音频/视频对象。
修改此基本 HbbTV 应用以请求 IMA 直播并响应广告插播事件。
初始化应用
按照教程处理广播 a/v 对象中的说明,在 application.js
中初始化应用类,设置 broadcastAppManager
和 broadcastContainer
。然后,启动新的 VideoPlayer
和 AdManager
对象。
发出 IMA 流请求
在 HbbTVApp.onPlayStateChangeEvent()
方法中,发出流请求以响应应用切换到 PRESENTING_PLAYSTATE
。此方法可让您的应用准备好在响应 AD_BREAK_EVENT_ANNOUNCE
事件时加载广告插播清单。
如果设备未正确发出广播容器 PlayStateChange
事件,请使用 setInterval()
函数检查播放状态变化:
setInterval(function() {
if (!subscribedToStreamEvents &&
this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
subscribedToStreamEvents = true;
this.broadcastContainer.addStreamEventListener(
STREAM_EVENT_URL, 'eventItem', function(event) {
this.onStreamEvent(event);
}.bind(this));
debugView.log('Subscribing to stream events');
this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}
…
监听 HbbTV 流事件
创建 HbbTVApp.onStreamEvent()
方法以监听广告插播时间点事件 adBreakAnnounce
、adBreakStart
和 adBreakEnd
:
处理 HbbTV 流事件
如需处理 HbbTV 流事件,请完成以下步骤:
如需加载广告插播清单以响应 adBreakAnnounce
事件,请创建 HbbTVApp.onAdBreakAnnounce()
方法:
如需在广告插播期间切换到广告流播放,请创建 HbbTVApp.onAdBreakStart()
方法:
如需返回内容广播,请创建 HbbTVApp.onAdBreakEnd()
方法:
您现在可以在 HbbTV 应用中请求并展示 IMA SDK 广告插播时间。如需将您的应用与已完成的示例应用进行比较,请参阅 GitHub 上的 IMA HbbTV 示例。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-08-31。
[null,null,["最后更新时间 (UTC):2025-08-31。"],[[["\u003cp\u003eThis guide details how to integrate the IMA SDK into an HbbTV application to enable dynamic ad insertion, building upon a pre-existing ads manager class.\u003c/p\u003e\n"],["\u003cp\u003eThe process involves initializing the application, making an IMA stream request when the broadcast begins, and listening for HbbTV stream events signaling ad breaks.\u003c/p\u003e\n"],["\u003cp\u003eSpecific event handlers (\u003ccode\u003eonAdBreakAnnounce\u003c/code\u003e, \u003ccode\u003eonAdBreakStart\u003c/code\u003e, \u003ccode\u003eonAdBreakEnd\u003c/code\u003e) manage ad pod loading, ad playback, and the seamless transition back to broadcast content.\u003c/p\u003e\n"],["\u003cp\u003eRefer to the provided code snippets for implementation guidance and to the IMA HbbTV sample on GitHub for a complete working example.\u003c/p\u003e\n"]]],[],null,["| **Note:** Before moving forward with this guide, you must complete the steps in [Create the ads manager class](/ad-manager/dynamic-ad-insertion/sdk/html5/hbbtv-ads-manager).\n\nIn `application.js`, create the main class for your HbbTV app that interacts\nwith the HbbTV broadcast. This class interacts with the `broadcastAppManager`\nand `broadcastContainer`. For an example of a similar class, see\n[Handling the broadcast a/v object](//developer.hbbtv.org/tutorials/handling-the-broadcast-av-object/).\n\nModify this base HbbTV app to request an IMA stream and respond to ad break\nevents.\n\nInitialize the application\n\nInitialize the application class in `application.js`, set up the\n`broadcastAppManager`, and `broadcastContainer` following the tutorial,\n[Handling the broadcast a/v object](//developer.hbbtv.org/tutorials/handling-the-broadcast-av-object/).\nAfterwards, initiate new `VideoPlayer` and `AdManager` objects. \n\n /** Main HbbTV Application. */\n var HbbTVApp = function() {\n this.broadcastAppManager = document.getElementById('broadcast-app-manager');\n this.broadcastContainer = document.getElementById('broadcast-video');\n\n this.playState = -1; // -1 as null play state.\n\n try {\n this.applicationManager =\n this.broadcastAppManager.getOwnerApplication(document);\n this.applicationManager.show();\n this.broadcastContainer.bindToCurrentChannel();\n this.subscribedToStreamEvents = false;\n this.broadcastContainer.addEventListener(\n 'PlayStateChange', this.onPlayStateChangeEvent.bind(this));\n\n debugView.log('HbbTVApp: App loaded');\n this.videoPlayer = new VideoPlayer();\n this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));\n } catch (e) {\n debugView.log('HbbTVApp: No HbbTV device detected.');\n return;\n }\n\n this.adManager = new AdManager(this.videoPlayer);\n }; \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L39-L64\n\nMake an IMA stream request\n\nIn the `HbbTVApp.onPlayStateChangeEvent()` method, make a stream request in\nresponse to the app switching to the `PRESENTING_PLAYSTATE`. This approach\nprepares your app to load the ad pod manifest in response to an\n`AD_BREAK_EVENT_ANNOUNCE` event. \n\n if (!this.subscribedToStreamEvents &&\n this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {\n this.subscribedToStreamEvents = true;\n this.broadcastContainer.addStreamEventListener(\n STREAM_EVENT_URL, 'eventItem', function(event) {\n this.onStreamEvent(event);\n }.bind(this));\n debugView.log('HbbTVApp: Subscribing to stream events.');\n this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);\n } \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L75-L84\n\nIf your device doesn't correctly emit the broadcast container `PlayStateChange`\nevent, use the `setInterval()` function to check for playstate changes: \n\n setInterval(function() {\n if (!subscribedToStreamEvents &&\n this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {\n subscribedToStreamEvents = true;\n this.broadcastContainer.addStreamEventListener(\n STREAM_EVENT_URL, 'eventItem', function(event) {\n this.onStreamEvent(event);\n }.bind(this));\n debugView.log('Subscribing to stream events');\n this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);\n }\n ...\n\nListen to HbbTV stream events\n\nCreate the `HbbTVApp.onStreamEvent()` method to listen to the ad break events\n`adBreakAnnounce`, `adBreakStart`, and `adBreakEnd`: \n\n /**\n * Callback for HbbTV stream event.\n * @param {!Event} event Stream event payload.\n */\n HbbTVApp.prototype.onStreamEvent = function(event) {\n var eventData = JSON.parse(event.text);\n var eventType = eventData.type;\n if (eventType == AD_BREAK_EVENT_ANNOUNCE) {\n this.onAdBreakAnnounce(eventData);\n } else if (eventType == AD_BREAK_EVENT_START) {\n this.onAdBreakStart(eventData);\n } else if (eventType == AD_BREAK_EVENT_END) {\n this.onAdBreakEnd(eventData);\n }\n }; \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L94-L108\n\nHandle the HbbTV stream events\n\nTo handle the HbbTV stream events, complete the following steps:\n\n1. To load the ad pod manifest in response to the `adBreakAnnounce` event,\n create the `HbbTVApp.onAdBreakAnnounce()` method:\n\n /**\n * Callback function on ad break announce stream event.\n * @param {!Event} event HbbTV stream event payload.\n */\n HbbTVApp.prototype.onAdBreakAnnounce = function(event) {\n var eventType = event.type;\n var eventDuration = event.duration;\n var eventOffset = event.offset;\n debugView.log(\n 'HbbTV event: ' + eventType + ' duration: ' + eventDuration +\n 's offset: ' + eventOffset + 's');\n this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);\n }; \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L138-L150\n\n2. To switch to ad stream playback during ad breaks, create the\n `HbbTVApp.onAdBreakStart()` method:\n\n /**\n * Callback function on ad break start stream event.\n * @param {!Event} event HbbTV stream event payload.\n */\n HbbTVApp.prototype.onAdBreakStart = function(event) {\n debugView.log('HbbTV event: ' + event.type);\n if (!this.videoPlayer.isPreloaded()) {\n debugView.log('HbbTVApp: Switch aborted. ' +\n 'The ad preloading buffer is insufficient.');\n return;\n }\n this.stopBroadcast();\n this.videoPlayer.play();\n }; \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L154-L167\n\n3. To return to the content broadcast, create the `HbbTVApp.onAdBreakEnd()`\n method:\n\n /**\n * Callback function on ad break end stream event.\n * @param {!Event} event HbbTV stream event payload.\n */\n HbbTVApp.prototype.onAdBreakEnd = function(event) {\n debugView.log('HbbTV event: ' + event.type);\n this.videoPlayer.stop();\n this.resumeBroadcast();\n }; \n https://github.com/googleads/googleads-ima-html5-dai/blob/d215db4a053d12c842e899da470684142ff732f6/hbbtv/application.js#L171-L179\n\nYou're now requesting and displaying IMA SDK ad pods in your HbbTV\napp. To compare your app with a completed sample app, see the\n[IMA HbbTV sample on GitHub](//github.com/googleads/googleads-ima-html5-dai/tree/main/hbbtv)."]]