広告のカウントダウン タイマーを作成する

このガイドでは、IMA DAI SDK を使って広告カウントダウン タイマーを実装する方法について説明します。 カウントダウン タイマーは HTML 要素であるため、必要に応じてスタイルと位置を調整できます。

前提条件

このガイドは、 スタートガイド

タイマーの作成

タイマーを作成するには、HTML にプレースホルダ要素を追加し、 CSS。次に、AdProgress イベントをリッスンする JavaScript を追加して、 予定の 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;
    }
  }