Stay organized with collectionsSave and categorize content based on your preferences.
Inapplication.js, create the main class for your HbbTV app that interacts
with the HbbTV broadcast. This class interacts with thebroadcastAppManagerandbroadcastContainer. For an example of a similar class, seeHandling the broadcast a/v object.
Modify this base HbbTV app to request an IMA stream and respond to ad break
events.
Initialize the application
Initialize the application class inapplication.js, set up thebroadcastAppManager, andbroadcastContainerfollowing the tutorial,Handling the broadcast a/v object.
Afterwards, initiate newVideoPlayerandAdManagerobjects.
/** Main HbbTV Application. */varHbbTVApp=function(){this.broadcastAppManager=document.getElementById('broadcast-app-manager');this.broadcastContainer=document.getElementById('broadcast-video');this.playState=-1;// -1 as null play state.try{this.applicationManager=this.broadcastAppManager.getOwnerApplication(document);this.applicationManager.show();this.broadcastContainer.bindToCurrentChannel();this.subscribedToStreamEvents=false;this.broadcastContainer.addEventListener('PlayStateChange',this.onPlayStateChangeEvent.bind(this));debugView.log('HbbTVApp: App loaded');this.videoPlayer=newVideoPlayer();this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));}catch(e){debugView.log('HbbTVApp: No HbbTV device detected.');return;}this.adManager=newAdManager(this.videoPlayer);};
In theHbbTVApp.onPlayStateChangeEvent()method, make a stream request in
response to the app switching to thePRESENTING_PLAYSTATE. This approach
prepares your app to load the ad pod manifest in response to anAD_BREAK_EVENT_ANNOUNCEevent.
if(!this.subscribedToStreamEvents&&this.broadcastContainer.playState==PRESENTING_PLAYSTATE){this.subscribedToStreamEvents=true;this.broadcastContainer.addStreamEventListener(STREAM_EVENT_URL,'eventItem',function(event){this.onStreamEvent(event);}.bind(this));debugView.log('HbbTVApp: Subscribing to stream events.');this.adManager.requestStream(NETWORK_CODE,CUSTOM_ASSET_KEY);}
If your device doesn't correctly emit the broadcast containerPlayStateChangeevent, use thesetInterval()function to check for playstate changes:
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);}…
Listen to HbbTV stream events
Create theHbbTVApp.onStreamEvent()method to listen to the ad break eventsadBreakAnnounce,adBreakStart, andadBreakEnd:
To return to the content broadcast, create theHbbTVApp.onAdBreakEnd()method:
/*** Callback function on ad break end stream event.* @param {!Event} event HbbTV stream event payload.*/HbbTVApp.prototype.onAdBreakEnd=function(event){debugView.log('HbbTV event: '+event.type);this.videoPlayer.stop();this.resumeBroadcast();};
You're now requesting and displaying IMA SDK ad pods in your HbbTV
app. To compare your app with a completed sample app, see theIMA HbbTV sample on GitHub.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-09-04 UTC."],[[["\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)."]]
