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 grupo de anuncios, escuche los eventos de transmisión de IMA y pase los eventos 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 de administrador de anuncios y establece objetos de escucha para los eventos de transmisión de IMA. En esta llamada, establece 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);
};

Realiza una solicitud para una transmisión de grupo de anuncios

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

  • Código de red: '21775744923'
  • Clave de contenido personalizado: '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();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};

Escucha los 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;
  }
};

Controla los metadatos de 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 de 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);
  }
};

Carga el manifiesto del grupo de anuncios

Crea el método AdManager.loadAdPodManifest() para precargar el manifiesto del grupo de anuncios con el reproductor de video. Crea una URL de manifiesto autenticada con la estructura que se indica en Método: Manifiesto del bloque 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('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};

La app de ejemplo de HbbTV usa un valor único generado de forma aleatoria adBreakId. En las apps de producción, el valor adBreakId es una cadena alfanumérica, por ejemplo, ab-001, que se incrementa en uno por cada pausa publicitaria. Verifica que el valor adBreakId sea el mismo para todos los usuarios de la pausa publicitaria. Para obtener un valor adBreakId, te recomendamos que uses la API de DAI Ad Break. En un entorno de producción, incluye el valor adBreakId y el valor 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