Questa guida illustra come aggiungere un timer per il conto alla rovescia che visualizzi i secondi rimanenti nell'annuncio corrente a un'implementazione DAI dell'SDK IMA HTML5. Il timer per il conto alla rovescia è un elemento HTML che ti consente di modificarne lo stile e il posizionamento.
Prerequisiti
Questa guida si basa sull'esempio di DAI HTML5 descritto nella Guida introduttiva.
Creazione del timer
Per creare il timer, aggiungi un elemento segnaposto al codice HTML e implementa lo stile nel
CSS. Quindi, aggiungi del codice JavaScript per ascoltare l'evento AdProgress e calcolare il tempo rimanente dal valore adProgressData dell'evento.
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;
}
}