設定玩家類別

注意： 請務必先完成「在 HbbTV 上開始使用 IMA SDK」中的步驟，再繼續閱讀本指南。

在 video_player.js 中，定義影片播放器包裝函式類別，以啟動及控制 dash.js 播放器。

設定寬頻播放器

建立影片和包裝函式代碼，定義要在應用程式中放置寬頻播放器的位置：

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>
index.html

建立影片播放器

使用 HTML 元素、dash.js 播放器和回呼的變數，初始化影片播放器類別，供其他類別方法使用。

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};
video_player.js

定義播放控制項函式

如要顯示廣告播放器並附加影片觀看次數，請建立 VideoPlayer.play() 方法。接著，建立 VideoPlayer.stop() 方法，在廣告 Pod 結束後處理清除作業。

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};
video_player.js

預先載入廣告串流資訊清單

如要確認廣告在內容串流期間和廣告插播時段開始前已充分載入，請使用 VideoPlayer.preload() 和 VideoPlayer.isPreloaded()。

1. 預先載入廣告串流

建立 VideoPlayer.preload() 方法，預先載入廣告串流資訊清單，並在廣告插播前建立廣告緩衝區。你必須將播放器串流設定 'cacheInitSegments' 更新為 true。更新設定後，系統會啟用初始片段的快取功能，避免切換至廣告時發生延遲。

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};
video_player.js

2. 檢查預先載入的廣告緩衝區

建立 VideoPlayer.isPreloaded() 方法，檢查預先載入的廣告緩衝區是否足夠，與應用程式中設定的緩衝區門檻相比：

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
video_player.js

/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};
video_player.js

附加播放器事件監聽器

如要為 dash.js 播放器事件新增事件監聽器，請建立 VideoPlayer.attachPlayerListener() 方法：PLAYBACK_PLAYING、PLAYBACK_ENDED、LOG 和 ERROR。這個方法也會處理配置 ID URI 的事件，並設定清除函式來移除這些監聽器。

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
video_player.js

/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};
video_player.js

設定播放器事件回呼

如要根據播放器事件管理廣告連播播放，請建立 VideoPlayer.onAdPodPlaying()、VideoPlayer.onAdPodEnded() 和 VideoPlayer.onAdPodError() 方法：

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};
video_player.js

為 onAdPodEnded 事件建立設定器

建立 VideoPlayer.setOnAdPodEnded() 方法，設定在廣告插播結束時執行的回呼函式。應用程式類別會使用這個方法，在廣告插播後繼續播放內容。

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};
video_player.js

處理串流中繼資料事件

建立 VideoPlayer.setEmsgEventHandler() 方法，根據 emsg 事件設定要執行的回呼函式。在本指南中，請加入 scope 參數，因為您是在 video_player.js 外部呼叫 setEmsgEventHandler()。

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};
video_player.js

在廣告插播期間顯示及隱藏影片播放器

如要在廣告插播期間顯示影片播放器，並在廣告插播結束後隱藏播放器，請建立 VideoPlayer.show() 和 VideoPlayer.hide() 方法：

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};
video_player.js

接著，請建立廣告管理員類別，使用 IMA SDK 提出串流請求、取得廣告插播資訊清單、監聽 IMA 串流事件，以及將 emsg 事件傳遞至 IMA SDK。