Playlists de anúncios automáticas

O SDK HTML5 do IMA oferece suporte a playlists de anúncios totalmente automatizadas. Esse recurso insere intervalos de anúncios no conteúdo conforme especificado no Google Ad Manager ao veicular seus anúncios. Ele também simplifica muito o código do player de vídeo necessário para oferecer suporte a intervalos de anúncios, incluindo anúncios precedentes, intermediários e finais.

  • Ao criar o AdsManager, um objeto contentPlayback é transmitido usando a chamada getAdsManager. Esse objeto precisa ter uma propriedade currentTime que retorne a posição atual do controle de reprodução do vídeo. Se você estiver usando um elemento video HTML5 para mostrar seu conteúdo, basta transmitir esse elemento para o SDK. Esse objeto é usado para acompanhar o progresso da reprodução do conteúdo para que os intervalos de anúncios sejam inseridos automaticamente nos horários especificados no Ad Manager. Você também precisa informar ao SDK que quer que ele gerencie o estado do conteúdo em seu nome. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for contentPlayback.
  • Para garantir que os anúncios pós-rolagem sejam veiculados, informe ao SDK quando o conteúdo for concluído. Isso é um pouco complicado, porque, em alguns casos, o SDK usa o player de vídeo para exibir anúncios. Portanto, informe ao SDK apenas quando o conteúdo for concluído, e não quando um anúncio for concluído. Para fazer isso, use o seguinte código: 
    var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}
  • Os eventos CONTENT_PAUSE_REQUESTED e CONTENT_RESUME_REQUESTED são usados para pausar e retomar o conteúdo quando os intervalos de anúncio são reproduzidos.
  • Se o player de vídeo oferecer suporte ao recurso de arrastar para procurar e a propriedade de tempo atual do player for atualizada enquanto o usuário estiver arrastando, o SDK não poderá diferenciar entre o conteúdo que está sendo reproduzido normalmente e um usuário que está procurando pelo conteúdo. É necessário usar um objeto contentPlayback personalizado como parâmetro para getAdsManager. Para conferir um exemplo desse caso de uso, consulte Os problemas com a busca.

Observação:quando o conteúdo terminar de ser reproduzido ou o usuário interromper a reprodução, chame AdsLoader.contentComplete para sinalizar ao SDK que o conteúdo foi concluído. Em seguida, o SDK vai reproduzir o intervalo de anúncios pós-rolagem, se um tiver sido programado. O evento ALL_ADS_COMPLETED é gerado quando TODOS os intervalos de anúncio são reproduzidos. Além disso, o rastreamento de conteúdo começa quando init() é chamado, e você precisa sempre chamar init() antes de reproduzir o conteúdo.

Desativar a reprodução automática de intervalos de anúncio

Em algumas circunstâncias, talvez seja necessário impedir que o SDK reproduza intervalos de anúncios até que você esteja pronto para eles. Nesse cenário, é possível desativar a reprodução automática de intervalos de anúncio para informar ao SDK quando você estiver pronto para exibir um intervalo de anúncio. Com essa configuração, depois que o SDK carrega um intervalo de anúncio, ele dispara um evento AD_BREAK_READY. Quando o player estiver pronto para iniciar o intervalo de anúncios, chame adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

Faça um teste

Confira o código abaixo para ver uma implementação funcional.

O problema com a busca

Se você usa regras de anúncio, pode encontrar um problema com a busca de clique e arrasto. Especificamente, depois que um usuário clica e arrasta para procurar no vídeo depois de vários vídeos, ele pode ver dois ou mais desses vídeos sendo reproduzidos um após o outro antes de o conteúdo ser retomado. Isso é causado pela atualização do tempo do indicador de reprodução do vídeo enquanto o usuário está buscando. Se o SDK detectar o tempo atual enquanto o usuário passa por um anúncio, ele pode pensar que o anúncio precisa ser reproduzido. Quando o conteúdo é retomado, ele exibe esse anúncio e, em seguida, o mais recente desde a busca. Para uma representação visual desse problema, consulte o diagrama a seguir:

Salve a hora atual quando o usuário começar a buscar e informe essa hora quando o SDK pedir até que o usuário retome a reprodução normal. Para uma representação visual dessa solução, consulte o diagrama a seguir:

Com essa solução, você pula corretamente o anúncio intermediário de 0:10 e exibe apenas o de 0:20. Isso é feito usando um rastreador de playhead personalizado no snippet de código abaixo. Esse código contém modificações (mostradas em negrito) de ads.js no exemplo avançado de HTML5 disponível na página de download.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Problemas conhecidos com o Safari para dispositivos móveis

Esse método deve funcionar em todas as plataformas, exceto no Safari para dispositivos móveis. No Safari para dispositivos móveis, a propriedade de busca da tag de vídeo não é implementada corretamente (ela sempre retorna "false"). Para contornar isso, você precisa fazer sua própria verificação para verificar se o usuário está avançando o vídeo. Confira o exemplo de código para este método. Novamente, as linhas em negrito são modificações no código atual.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

Com essas mudanças, o SDK agora usa a propriedade currentTime do objeto Ads para determinar quando reproduzir intervalos de anúncios, e não a propriedade currentTime do player de vídeo de conteúdo.