Compila la clase de la aplicación

En application.js, crea la clase principal de 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 de transmisión de audio y video.

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

Inicializa la aplicación

Inicializa la clase de la aplicación en application.js, configura broadcastAppManager y broadcastContainer siguiendo el instructivo Cómo controlar el objeto de transmisión de audio y video. Luego, inicia nuevos objetos VideoPlayer y 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

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 que cargue el manifiesto del grupo 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 si hay cambios en el estado de juego:

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

Cómo escuchar eventos de transmisión de HbbTV

Crea el método HbbTVApp.onStreamEvent() para escuchar los eventos de pausa publicitaria 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 del 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 flujo 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 HbbTV de IMA en GitHub.

Anterior
Crea la clase de administrador de anuncios