В этом руководстве рассказывается, как реализовать таймер обратного отсчета рекламы с помощью IMA DAI SDK. Таймер обратного отсчета — это элемент HTML, поэтому вы можете при необходимости изменить его стиль и расположение.
Предварительные условия
Это руководство основано на примере HTML5 DAI, описанном в руководстве по началу работы .
Создание таймера
Чтобы создать таймер, добавьте элемент-заполнитель в HTML и реализуйте стиль в CSS. Затем добавьте немного кода JavaScript для прослушивания события AdProgress
и расчета оставшегося времени на основе adProgressData
события.
dai.html
<body onLoad="initPlayer()"> <h2>IMA DAI SDK for HTML5 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; } }