Criar a classe do gerenciador de anúncios

Observação: antes de continuar com este guia, conclua as etapas em Configurar a classe do player.

Em ads_manager.js, defina uma classe wrapper para o StreamManager do SDK do IMA que faz solicitações de stream, recebe o manifesto do conjunto de anúncios, detecta eventos de stream do IMA e transmite eventos emsg para o SDK do IMA.

Em ads_manager.js, o app de exemplo HbbTV do IMA configura os seguintes métodos:

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

Inicializar o gerenciador de anúncios

Inicialize a classe do gerenciador de anúncios e defina listeners para os eventos de stream da IMA. Nessa chamada, defina o manipulador de eventos emsg com o método VideoPlayer.setEmsgEventHandler().

Importante: o SDK do IMA não é compatível com a interface do anúncio no HbbTV. Não transmita o parâmetro adUiElement no construtor StreamManager. Transmitir adUiElement pode fazer com que o Ad Manager veicule anúncios incompatíveis.

/**
 * 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

Fazer uma solicitação de um fluxo de um conjunto de anúncios

Crie o método AdManager.requestStream() para criar um objeto PodStreamRequest usando o código da rede do Google Ad Manager e a chave de recurso personalizada do stream. Teste seu app HbbTV usando o fluxo de veiculação de pod DASH de amostra da IMA com os seguintes parâmetros de fluxo:

• Código da rede: '21775744923'
• Chave de recurso 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

Detectar eventos de stream de anúncios

Crie o método AdManager.onStreamEvent() para processar a resposta do app aos eventos de stream do IMA, STREAM_INITIALIZED, AD_BREAK_STARTED e 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

Processar metadados de stream de anúncios

Para transmitir as informações do evento emsg à IMA, crie o método AdManager.onEmsgEvent() usando o método StreamManager.processMetadata(). A classe do player de vídeo chama esse método com o 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

Carregar o manifesto do pod de anúncio

Crie o método AdManager.loadAdPodManifest() para pré-carregar o manifesto do conjunto de anúncios com o player de vídeo. Construa o URL do manifesto usando a estrutura em Método: manifesto do pod 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

O app de exemplo HbbTV usa um podId exclusivo gerado aleatoriamente. Em apps de produção, o podId é um número inteiro que começa em um e aumenta em um para cada intervalo de publicidade. Verifique se o podId é o mesmo valor para todos os espectadores do intervalo comercial. Para receber um podId, recomendamos usar a API Early ad break notifications (EABN). Em um ambiente de produção, inclua podId e podDuration no evento de stream HbbTV AD_BREAK_ANNOUNCE.

Em seguida, crie a classe principal do aplicativo HbbTV que interage com a transmissão HbbTV.