Créer un compte à rebours pour une annonce

Nous vous recommandons d'utiliser le compte à rebours intégré fourni par le SDK IMA HTML5 à l'aide de UIElements. Si vous souhaitez tout de même implémenter votre propre intégration, procédez comme suit.

Ce guide vous explique comment ajouter un compte à rebours à une implémentation du SDK IMA HTML5.

Prérequis

Ce guide suppose que vous disposez d'une implémentation fonctionnelle du SDK IMA HTML5. Si ce n'est pas le cas, consultez le guide de démarrage.

Créer le minuteur

Pour ajouter un compte à rebours à votre lecteur vidéo compatible avec IMA, il vous suffit d'ajouter quelques lignes de code JavaScript pour interroger la propriété remainingTime de l'instance AdsManager. Nous utilisons la méthode setInterval() pour appeler une fonction toutes les secondes afin de vérifier 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);
  }
}
  

Essayer

Consultez cette implémentation fonctionnelle.