Creazione di un timer conto alla rovescia annuncio

Questa guida illustra come aggiungere un timer con conto alla rovescia a un'implementazione dell'SDK IMA per HTML5.

Prerequisiti

Questa guida presuppone che l'implementazione dell'SDK IMA per HTML5 sia funzionante. In caso contrario, consulta la Guida introduttiva.

Creazione del timer

L'aggiunta di un timer con conto alla rovescia al video player abilitato per IMA richiede solo aggiungendo alcune righe di JavaScript per eseguire il polling della proprietà remainingTime dell'istanza AdsManager. Usiamo il metodo setInterval() per chiama 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

Di seguito puoi vedere un'implementazione funzionante.