Crear un temporizador de cuenta regresiva de anuncios

Recomendamos el temporizador de cuenta regresiva integrado que proporciona el SDK de IMA HTML5 con UIElements. Si aún quieres implementar tu propio sistema, sigue estos pasos.

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.