En esta guía, se explica cómo agregar un temporizador de cuenta regresiva a la implementación del SDK de IMA para HTML5.
Requisitos previos
En esta guía, se da por sentado que tienes una implementación del SDK de IMA para HTML5 que funciona. De lo contrario, consulta la guía de introducción.
Creando el temporizador
Para agregar un temporizador de cuenta regresiva a un reproductor de video compatible con IMA, solo necesita
Agrega algunas líneas de JavaScript para sondear la propiedad remainingTime.
de la instancia de AdsManager. Usamos el método setInterval() para
llama a una función cada segundo para 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.