crea la classe dell'applicazione

In application.js, crea la classe principale per la tua app HbbTV che interagisce con la trasmissione HbbTV. Questo corso interagisce con broadcastAppManager e broadcastContainer. Per un esempio di classe simile, vedi Gestione dell'oggetto a/v di trasmissione.

Modifica questa app HbbTV di base per richiedere uno stream IMA e rispondere agli eventi di interruzione pubblicitaria.

Inizializza l'applicazione

Inizializza la classe dell'applicazione in application.js, configura broadcastAppManager e broadcastContainer seguendo il tutorial Gestione dell'oggetto a/v di trasmissione. Successivamente, avvia nuovi oggetti 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);
};
application.js

Invia una richiesta di stream IMA

Nel metodo HbbTVApp.onPlayStateChangeEvent(), invia una richiesta di flusso in risposta al passaggio dell'app a PRESENTING_PLAYSTATE. Questo approccio prepara la tua app a caricare il manifest del pod di annunci in risposta a un 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);
}
application.js

Se il dispositivo non emette correttamente l'evento PlayStateChange del contenitore di trasmissione, utilizza la funzione setInterval() per verificare le modifiche dello stato di riproduzione:

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);
      }
      …

Ascoltare gli eventi di streaming HbbTV

Crea il metodo HbbTVApp.onStreamEvent() per ascoltare gli eventi di interruzione pubblicitaria 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);
  }
};
application.js

Gestire gli eventi di flusso HbbTV

Per gestire gli eventi di stream HbbTV, completa i seguenti passaggi:

  1. Per caricare il manifest del pod di annunci in risposta all'evento adBreakAnnounce, crea il metodo 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);
};
    application.js

  2. Per passare alla riproduzione del flusso di annunci durante le interruzioni pubblicitarie, crea il metodo 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();
};
    application.js

  3. Per tornare alla trasmissione dei contenuti, crea il metodo 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();
};
    application.js

Ora stai richiedendo e visualizzando i pod di annunci dell'SDK IMA nella tua app HbbTV. Per confrontare la tua app con un'app di esempio completata, consulta l'esempio HbbTV IMA su GitHub.

Indietro
Creare il corso Gestione annunci