Compila la clase de la aplicación

Nota:Antes de continuar con esta guía, debes completar los pasos en Crea la clase del administrador de anuncios.

En application.js, crea la clase principal para tu app de HbbTV que interactúa con la transmisión de HbbTV. Esta clase interactúa con broadcastAppManager y broadcastContainer. Para ver un ejemplo de una clase similar, consulta Cómo controlar el objeto a/v de transmisión.

Modifica esta app base de HbbTV para solicitar una transmisión de IMA y responder a los eventos de pausas publicitarias.

Inicializa la aplicación

Inicializa la clase de aplicación en application.js, configura broadcastAppManager y broadcastContainer siguiendo el instructivo Cómo controlar el objeto a/v de transmisión. Luego, inicia los objetos VideoPlayer y AdManager nuevos.

/** 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

Realiza una solicitud de transmisión de IMA

En el método HbbTVApp.onPlayStateChangeEvent(), realiza una solicitud de transmisión en respuesta a que la app cambie a PRESENTING_PLAYSTATE. Este enfoque prepara tu app para cargar el manifiesto de pod de anuncios en respuesta 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

Si tu dispositivo no emite correctamente el evento PlayStateChange del contenedor de transmisión, usa la función setInterval() para verificar los cambios de estado de reproducción:

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

Escucha los eventos de transmisión de HbbTV

Crea el método HbbTVApp.onStreamEvent() para escuchar los eventos de pausas publicitarias adBreakAnnounce, adBreakStart y 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

Controla los eventos de transmisión de HbbTV

Para controlar los eventos de transmisión de HbbTV, completa los siguientes pasos:

1. Para cargar el manifiesto de pod de anuncios en respuesta al evento adBreakAnnounce, crea el método 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. Para cambiar a la reproducción de transmisión de anuncios durante las pausas publicitarias, crea el 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();
   };
   application.js

3. Para volver a la transmisión de contenido, crea el 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();
   };
   application.js

Ahora solicitas y muestras grupos de anuncios del SDK de IMA en tu app de HbbTV. Para comparar tu app con una app de ejemplo completa, consulta la muestra de IMA HbbTV en GitHub.