Criar um timer de contagem regressiva para o anúncio

Este guia mostra como adicionar um timer de contagem regressiva a uma implementação do SDK do IMA HTML5.

Pré-requisitos

Este guia pressupõe que você tenha uma implementação funcional do SDK do IMA para HTML5. Caso contrário, consulte o Guia explicativo.

Criando o timer

Para adicionar um timer de contagem regressiva ao player de vídeo com IMA ativado, basta adicionar algumas linhas de JavaScript para pesquisar a propriedade remainingTime da instância AdsManager. Usamos o método setInterval() para chamar uma função a cada segundo e verificar adsManager.remainingTime.

// Global countdown timer
var countdownTimer;
...
function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.STARTED,
      onAdsStarted);
}
...
function onAdsStarted(adEvent) {
  countdownTimer = setInterval(function() {
    var timeRemaining = adsManager.getRemainingTime();
    // Update UI with timeRemaining
  }, 1000);
}
...
function onContentResumeRequested(adEvent) {
  ...
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
}

Testar

Confira abaixo uma implementação em funcionamento.