Z tego przewodnika dowiesz się, jak dodać licznik czasu, który pokazuje pozostałe sekundy w bieżącej reklamie, do implementacji DAI HTML5 w IMA SDK. Licznik odliczania to element HTML, więc w razie potrzeby możesz dostosować jego styl i położenie.
Wymagania wstępne
Ten przewodnik powstał na podstawie przykładu DAI w HTML5 opisanego w przewodniku Pierwsze kroki.
Tworzę minutnik
Aby utworzyć licznik czasu, dodaj element zastępczy do kodu HTML i zaimplementuj styl w CSS. Następnie dodaj kod JavaScript, aby nasłuchiwać zdarzenia AdProgress i obliczyć czas pozostały na podstawie parametru adProgressData zdarzenia.
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;
}
}