Questa guida illustra come aggiungere un timer con conto alla rovescia a un'implementazione di SDK IMA per HTML5.
Prerequisiti
Questa guida presuppone che tu abbia un'implementazione funzionante dell'SDK IMA HTML5. In caso contrario, consulta la Guida introduttiva.
Creazione del timer
Per aggiungere un timer per il conto alla rovescia al video player abilitato per IMA, è necessario aggiungere solo poche righe di JavaScript per eseguire il polling della proprietà remainingTime dell'istanza AdsManager. Utilizziamo il metodo setInterval() per chiamare una funzione ogni secondo e controllare 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);
}
}
Prova
Di seguito puoi vedere un'implementazione funzionante.