Countdown-Timer für Anzeigen erstellen

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

Voraussetzungen

In diesem Leitfaden wird davon ausgegangen, dass Sie eine funktionierende HTML5 IMA SDK-Implementierung haben. Ist dies nicht der Fall, lesen Sie den Startleitfaden.

Timer erstellen

Wenn Sie Ihrem IMA-fähigen Videoplayer einen Countdown-Timer hinzufügen möchten, müssen Sie nur einige JavaScript-Zeilen einfügen, um die remainingTime-Eigenschaft der AdsManager-Instanz abzufragen. Wir verwenden die Methode setInterval(), um jede Sekunde eine Funktion aufzurufen, 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);
  }
}

Ausprobieren

Unten sehen Sie eine funktionierende Implementierung.