在 application.js
中,为与 HbbTV 广播进行交互的 HbbTV 应用创建主要类。此类与 broadcastAppManager
和 broadcastContainer
交互。如需查看类似类的示例,请参阅处理广播 a/v 对象。
修改此基本 HbbTV 应用以请求 IMA 串流并响应广告插播事件。
初始化应用
按照处理广播 a/v 对象教程,初始化 application.js
中的应用类,设置 broadcastAppManager
和 broadcastContainer
。之后,启动新的 VideoPlayer
和 AdManager
对象。
/** Main HbbTV Application. */ var HbbTVApp = 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 = new VideoPlayer(); this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this)); } catch (e) { debugView.log('HbbTVApp: No HbbTV device detected.'); return; } this.adManager = new AdManager(this.videoPlayer); };
发出 IMA 视频流请求
在 HbbTVApp.onPlayStateChangeEvent()
方法中,响应应用切换到 PRESENTING_PLAYSTATE
时发出流式传输请求。此方法可让您的应用准备好在响应 AD_BREAK_EVENT_ANNOUNCE
事件时加载广告连播清单。
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); }
如果您的设备未正确发出广播容器 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
:
/** * Callback for HbbTV stream event. * @param {!Event} event Stream event payload. */ HbbTVApp.prototype.onStreamEvent = function(event) { var eventData = JSON.parse(event.text); var eventType = eventData.type; if (eventType == AD_BREAK_EVENT_ANNOUNCE) { this.onAdBreakAnnounce(eventData); } else if (eventType == AD_BREAK_EVENT_START) { this.onAdBreakStart(eventData); } else if (eventType == AD_BREAK_EVENT_END) { this.onAdBreakEnd(eventData); } };
处理 HbbTV 流式传输事件
如需处理 HbbTV 流事件,请完成以下步骤:
要加载广告连播清单以响应
adBreakAnnounce
事件,请创建HbbTVApp.onAdBreakAnnounce()
方法:/** * Callback function on ad break announce stream event. * @param {!Event} event HbbTV stream event payload. */ HbbTVApp.prototype.onAdBreakAnnounce = function(event) { var eventType = event.type; var eventDuration = event.duration; var eventOffset = event.offset; debugView.log( 'HbbTV event: ' + eventType + ' duration: ' + eventDuration + 's offset: ' + eventOffset + 's'); this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration); };
如需在广告插播期间切换到广告流播放,请创建
HbbTVApp.onAdBreakStart()
方法:/** * Callback function on ad break start stream event. * @param {!Event} event HbbTV stream event payload. */ HbbTVApp.prototype.onAdBreakStart = function(event) { debugView.log('HbbTV event: ' + event.type); if (!this.videoPlayer.isPreloaded()) { debugView.log('HbbTVApp: Switch aborted. ' + 'The ad preloading buffer is insufficient.'); return; } this.stopBroadcast(); this.videoPlayer.play(); };
如需返回内容广播,请创建
HbbTVApp.onAdBreakEnd()
方法:/** * 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(); };
现在,您正在 HbbTV 应用中请求并展示 IMA SDK 广告连播。如需将您的应用与已完成的示例应用进行比较,请参阅 GitHub 上的 IMA HbbTV 示例。