이 가이드는 IMA DAI SDK를 사용하여 광고 카운트다운 타이머를 구현하는 방법을 안내합니다. 카운트다운 타이머는 HTML 요소이므로 필요에 따라 스타일과 위치를 조정할 수 있습니다.
기본 요건
이 가이드는 시작하기 가이드를 참조하세요.
타이머 만들기
타이머를 만들려면 자리표시자 요소를 HTML에 추가하고
CSS 그런 다음 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; } }