Ce guide explique comment ajouter un compte à rebours qui affiche les secondes restantes dans l'annonce actuelle à une implémentation de l'insertion dynamique d'annonce du SDK IMA HTML5. Le compte à rebours est un élément HTML. Vous pouvez donc ajuster son style et son positionnement si nécessaire.
Conditions préalables
Ce guide s'appuie sur l'exemple d'insertion dynamique d'annonce HTML5 décrit dans le guide de démarrage.
Créer le minuteur
Pour créer le minuteur, ajoutez un élément d'espace réservé au code HTML et implémentez le style dans le code CSS. Ensuite, ajoutez du code JavaScript pour écouter l'événement AdProgress et calculer le temps restant à partir du adProgressData de l'événement.
dai.html
<body onLoad="initPlayer()">
<h2>IMA SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="adUi"></div>
<div id="ad-timer">Ad not currently playing.</div>
</body>
dai.css
#ad-timer {
display: inline-block;
margin-top: 375px;
padding: 15px;
border: 1px solid #000;
}
...
dai.js
...
var streamManager; // used to request ad-enabled streams.
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var timerElement
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
timerElement = document.getElementById('ad-timer');
...
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
google.ima.dai.api.StreamEvent.Type.PAUSED,
google.ima.dai.api.StreamEvent.Type.RESUMED,
google.ima.dai.api.StreamEvent.Type.AD_PROGRESS],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
var progressData = e.getStreamData().adProgressData;
var timeRemaining = Math.ceil(progressData.duration - progressData.currentTime);
timerElement.innerHTML = 'Ad finished in: ' + timeRemaining;
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
timerElement.innerHTML = 'Ad not currently playing.';
console.log('Ad Break Ended');
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}