Ce guide explique comment ajouter un compte à rebours à une implémentation du SDK IMA HTML5.
Conditions préalables
Ce guide suppose que votre implémentation du SDK IMA HTML5 fonctionne. Si ce n'est pas le cas, consultez le guide de démarrage.
Créer le minuteur
Pour ajouter un compte à rebours à votre lecteur vidéo compatible IMA, il vous suffit d'ajouter quelques lignes de code JavaScript pour interroger la propriété remainingTime de l'instance AdsManager. Nous utilisons la méthode setInterval() pour appeler une fonction toutes les secondes afin de 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 pouvez voir une implémentation fonctionnelle ci-dessous.