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.