Crea la clase de administrador de anuncios

En ads_manager.js, define una clase de wrapper para el StreamManager del SDK de IMA que realice solicitudes de transmisión, obtenga el manifiesto del pod de anuncios, escuche los eventos de transmisión de IMA y pase los eventos de emsg al SDK de IMA.

En ads_manager.js, la app de ejemplo de HbbTV de IMA configura los siguientes métodos:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

Inicializa el administrador de anuncios

Inicializa la clase del administrador de anuncios y configura objetos de escucha para los eventos de transmisión de IMA. En esta llamada, configura el controlador de eventos emsg con el método VideoPlayer.setEmsgEventHandler().

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

Realiza una solicitud para transmitir un pod de anuncios

Crea el método AdManager.requestStream() para crear un objeto PodStreamRequest con el código de red de Google Ad Manager y la clave de activo personalizada de la transmisión. Prueba tu app para HbbTV con la transmisión de publicación de pods de muestra de DASH de IMA con los siguientes parámetros de transmisión:

  • Código de red: '21775744923'
  • Clave del activo personalizada: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

Cómo detectar eventos de transmisión de anuncios

Crea el método AdManager.onStreamEvent() para controlar la respuesta de tu app a los eventos de transmisión de IMA, STREAM_INITIALIZED, AD_BREAK_STARTED y AD_BREAK_ENDED.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

Cómo controlar los metadatos de la transmisión de anuncios

Para pasar la información del evento emsg a IMA, crea el método AdManager.onEmsgEvent() con el método StreamManager.processMetadata(). La clase del reproductor de video llama a este método con el método VideoPlayer.setEmsgEventHandler().

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

Carga el manifiesto del pod de anuncios

Crea el método AdManager.loadAdPodManifest() para precargar el manifiesto del grupo de anuncios con el reproductor de video. Construye la URL del manifiesto con la estructura que se muestra en Método: Manifiesto del Pod de DASH.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

La app de ejemplo de HbbTV usa un podId único generado de forma aleatoria. En las apps de producción, podId es un número entero que comienza en uno y aumenta en uno para cada corte publicitario. Verifica que podId tenga el mismo valor para todos los usuarios que miran la pausa publicitaria. Para obtener un podId, te recomendamos que uses la API de Early ad break notifications (EABN). En un entorno de producción, incluye podId y podDuration en el evento de transmisión de HbbTV AD_BREAK_ANNOUNCE.

A continuación, crea la clase de aplicación principal para tu app de HbbTV que interactúa con la transmisión de HbbTV.

Anterior
Cómo configurar la clase de jugador
Siguiente
Compila la clase de la aplicación