Z tego przewodnika dowiesz się, jak dodać odliczanie do implementacji pakietu HTML5 IMA SDK.
Wymagania wstępne
W tym przewodniku przyjęto, że masz działającą implementację pakietu IMA SDK w formacie HTML5. Jeśli tego nie zrobisz, zapoznaj się z przewodnikiem dla początkujących.
Tworzę minutnik
Aby dodać odliczanie do odtwarzacza wideo obsługującego IMA, wystarczy, że dodasz odliczanie
dodaję kilka wierszy kodu JavaScript, aby sondować właściwość remainingTime.
instancji AdsManager. Metoda setInterval() służy do:
wywołuj funkcję 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 możesz zobaczyć działającą implementację.