Em application.js
, crie a classe principal do app HbbTV que interage
com a transmissão do HbbTV. Essa classe interage com o broadcastAppManager
e o broadcastContainer
. Para conferir um exemplo de uma classe semelhante, consulte
Como processar o objeto de transmissão de áudio/vídeo.
Modifique este app de HbbTV básico para solicitar um stream do IMA e responder a eventos de intervalo de anúncio.
Inicializar o aplicativo
Inicialize a classe do aplicativo em application.js
, configure o
broadcastAppManager
e o broadcastContainer
seguindo o tutorial,
Processamento do objeto de transmissão de áudio/vídeo.
Em seguida, inicie novos objetos VideoPlayer
e 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); };
Fazer uma solicitação de stream do IMA
No método HbbTVApp.onPlayStateChangeEvent()
, faça uma solicitação de transmissão em
resposta à mudança do app para o PRESENTING_PLAYSTATE
. Essa abordagem
prepara o app para carregar o manifesto do bloco de anúncios em resposta a um
evento 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); }
Se o dispositivo não emitir corretamente o evento PlayStateChange
do contêiner de transmissão, use a função setInterval()
para verificar se há mudanças no estado de reprodução:
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);
}
…
Ouvir eventos de streaming da HbbTV
Crie o método HbbTVApp.onStreamEvent()
para detectar os eventos de intervalo de anúncio
adBreakAnnounce
, adBreakStart
e 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); } };
Processar os eventos de streaming do HbbTV
Para processar os eventos de transmissão do HbbTV, siga estas etapas:
Para carregar o manifesto do conjunto de anúncios em resposta ao evento
adBreakAnnounce
, crie o métodoHbbTVApp.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); };
Para alternar para a reprodução do fluxo de anúncios durante os intervalos, crie o método
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(); };
Para retornar à transmissão de conteúdo, crie o método
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(); };
Agora você está solicitando e exibindo conjuntos de anúncios do SDK do IMA no seu app HbbTV. Para comparar seu app com um app de exemplo completo, consulte o exemplo do IMA HbbTV no GitHub.