Compila la clase de la aplicación

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

Modificarás esta app de HbbTV básica 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 según el instructivo Cómo controlar el objeto de audio y video de transmisión. Luego, inicializa 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 al cambio de la app a PRESENTING_PLAYSTATE. Este enfoque prepara tu app para cargar el manifiesto del 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 del contenedor de transmisión PlayStateChange, usa la función setInterval() para verificar los cambios en el 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);
      }
      …

Cómo detectar 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 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 la 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 pods de anuncios del SDK de IMA en tu app de HbbTV. Para comparar tu app con una app de muestra completa, consulta la muestra de IMA para HbbTV en GitHub.

Anterior
Crea la clase de administrador de anuncios