Ce guide explique comment ajouter un compte à rebours dans l'implémentation du SDK IMA HTML5.
Prérequis
Dans ce guide, nous partons du principe que vous disposez d'une implémentation fonctionnelle du SDK IMA HTML5. Si ce n'est pas le cas, consultez le guide de démarrage.
Créer le minuteur
L'ajout d'un compte à rebours dans votre
lecteur vidéo compatible IMA ne nécessite
en ajoutant quelques lignes de code JavaScript pour interroger la propriété remainingTime
de l'instance AdsManager. Nous utilisons la méthode setInterval() pour
appelez une fonction toutes les secondes pour vérifier 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);
}
}
Essayer
Vous trouverez ci-dessous une implémentation fonctionnelle.