Countdown-Timer für Anzeigen erstellen

In diesem Leitfaden erfahren Sie, wie Sie in einer HTML5 IMA SDK-Implementierung einen Countdown-Timer hinzufügen.

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie eine funktionierende HTML5 IMA SDK-Implementierung haben. Falls nicht, finden Sie im Startleitfaden.

Erstellen des Timers

Das Hinzufügen eines Countdown-Timers zu Ihrem IMA-fähigen Videoplayer Ein paar Zeilen JavaScript hinzufügen, um das Attribut remainingTime abzufragen der Instanz AdsManager. Wir verwenden die Methode setInterval(), rufen Sie jede Sekunde eine Funktion auf, um adsManager.remainingTime zu prüfen.

// 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);
  }
}

Jetzt ausprobieren

Unten sehen Sie eine funktionierende Implementierung.