Creare un timer per il conto alla rovescia degli annunci

Questa guida illustra la procedura per aggiungere un timer di conto alla rovescia a un'implementazione dell'SDK IMA per HTML5.

Prerequisiti

Questa guida presuppone che tu abbia un'implementazione dell'SDK IMA per HTML5 funzionante. In caso contrario, consulta la sezione Configurare l'SDK IMA.

Crea il timer

Per aggiungere un timer di conto alla rovescia al video player abilitato per IMA è sufficiente aggiungere alcune righe di JavaScript per eseguire il polling della proprietà remainingTime dell'istanza AdsManager. Utilizziamo il metodo setInterval() per chiamare una funzione ogni secondo per controllare 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);
  }
}

Prova

Guarda questa implementazione funzionante.