En esta guía, se explica cómo agregar un temporizador de cuenta regresiva a una implementación del SDK de IMA HTML5.
Requisitos previos
En esta guía, se da por sentado que tiene una implementación del SDK de IMA HTML5 en funcionamiento. De lo contrario, consulta la guía de introducción.
Creando el temporizador
Para agregar un temporizador de cuenta regresiva a tu reproductor de video habilitado para IMA, solo debes agregar algunas líneas de JavaScript a fin de sondear la propiedad remainingTime de la instancia AdsManager. Usamos el método setInterval() para llamar a una función cada segundo a fin de verificar 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);
}
}
Probar
A continuación, puedes ver una implementación funcional.