Countdown-Timer für Anzeige erstellen

Wir empfehlen den integrierten Countdown-Timer des HTML5 IMA SDK mithilfe von UIElements. Wenn Sie dennoch eine eigene Implementierung vornehmen möchten, gehen Sie so vor:

In dieser Anleitung wird beschrieben, wie du einer HTML5-IMA SDK-Implementierung einen Countdown-Timer hinzufügst.

Vorbereitung

In diesem Leitfaden wird davon ausgegangen, dass Sie eine funktionierende Implementierung des HTML5 IMA SDK haben. Falls nicht, richten Sie das IMA SDK ein.

Timer erstellen

Wenn du deinem IMA-kompatiblen Videoplayer einen Countdown hinzufügen möchtest, musst du nur ein paar Zeilen JavaScript hinzufügen, um die remainingTime-Eigenschaft der AdsManager-Instanz abzufragen. Mit der Methode setInterval() wird jede Sekunde eine Funktion aufgerufen, 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

Hier sehen Sie eine funktionierende Implementierung.