Z tego przewodnika dowiesz się, jak dodać licznik czasu do implementacji pakietu HTML5 IMA SDK.
Wymagania wstępne
W tym przewodniku zakładamy, że masz działającą implementację pakietu IMA SDK HTML5. Jeśli go nie masz, zapoznaj się z przewodnikiem dla początkujących.
Tworzę minutnik
Dodanie licznika czasu do odtwarzacza wideo z obsługą IMA wymaga tylko dodania kilku wierszy kodu JavaScript w celu odpytywania właściwości remainingTime instancji AdsManager. Metoda setInterval() służy do wywoływania funkcji co sekundę, aby sprawdzić 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);
}
}
Wypróbuj
Poniżej znajdziesz działającą implementację.