Se usó la API de Cloud Translation para traducir esta página.

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 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 establece 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 grupo 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 personalizado del flujo. Prueba tu app de HbbTV con la transmisión de la entrega de grupos de DASH de muestra de IMA con los siguientes parámetros de transmisión:

Código de red: '21775744923'
Clave de 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 escuchar eventos de flujo 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

Controla los metadatos de transmisiones 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 grupo de anuncios

Crea el método AdManager.loadAdPodManifest() para precargar el manifiesto del grupo de anuncios con el reproductor de video. Crea la URL del manifiesto con la estructura que se muestra en Método: Manifiesto de 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 de a uno por cada pausa publicitaria. Asegúrate de que podId sea el mismo valor para todos los usuarios que vean la pausa publicitaria. Para obtener un podId, te recomendamos usar 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.

Cómo configurar la clase de jugador

Compila la clase de la aplicación