crea la classe dell'applicazione

In application.js, crea la classe principale per l'app HbbTV che interagisce con la trasmissione HbbTV. Questo corso interagisce con broadcastAppManager e broadcastContainer. Per un esempio di una classe simile, consulta Gestione dell'oggetto A/V della trasmissione.

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

Inizializzare l'applicazione

Inizializza la classe dell'applicazione in application.js, configura broadcastAppManager e broadcastContainer seguendo il tutorial, Gestione dell'oggetto a/v broadcast. Dopodiché, 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

Effettuare una richiesta di streaming IMA

Nel metodo HbbTVApp.onPlayStateChangeEvent(), effettua una richiesta di stream in risposta al passaggio dell'app a PRESENTING_PLAYSTATE. Questo approccio prepara l'app a caricare il manifest del pod di annunci in risposta a un AD_BREAK_EVENT_ANNOUNCE evento.

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 in 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 streaming HbbTV

Per gestire gli eventi 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 dello stream 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 puoi richiedere e visualizzare i pod di annunci SDK IMA nella tua app HbbTV. Per confrontare la tua app con un'app di esempio completata, consulta l'esempio IMA HbbTV su GitHub.

Indietro
Creare il corso Gestione annunci