Crear un temporizador de cuenta regresiva de anuncios

En esta guía, se explica cómo agregar un temporizador de cuenta regresiva a una implementación del SDK de IMA HTML5.

Requisitos previos

En esta guía, se da por sentado que tienes una implementación del SDK de IMA HTML5 que funciona. De lo contrario, consulta Configura el SDK de IMA.

Crea el temporizador

Para agregar un temporizador de cuenta regresiva a tu reproductor de video habilitado para IMA, solo debes agregar algunas líneas de JavaScript para sondear la propiedad remainingTime de la instancia AdsManager. Usamos el método setInterval() para llamar a una función cada segundo y 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);
  }
}

Probar

Consulta esta implementación en funcionamiento.