このガイドでは、現在の広告の残り秒数を表示するカウントダウン タイマーを HTML5 IMA SDK DAI 実装に追加する手順について説明します。カウントダウン タイマーは HTML 要素であるため、必要に応じてスタイルや配置を調整できます。
前提条件
このガイドは、スタートガイドに記載されている HTML5 DAI サンプルに基づいています。
タイマーを作成する
タイマーを作成するには、HTML にプレースホルダ要素を追加し、CSS にスタイルを実装します。次に、JavaScript を追加して AdProgress
イベントをリッスンし、イベントの adProgressData
から残り時間を計算します。
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; } }