本頁面由 Cloud Translation API 翻譯而成。

建構應用程式類別

在 application.js 中，為 HbbTV 應用程式建立主要類別，以便與 HbbTV 廣播互動。這個類別會與 broadcastAppManager 和 broadcastContainer 互動。如需類似類別的範例，請參閱處理廣播 a/v 物件。

修改這個基礎 HbbTV 應用程式，要求 IMA 串流並回應廣告插播事件。

將應用程式初始化

按照「處理廣播 a/v 物件」教學課程的說明，在 application.js 中初始化應用程式類別、設定 broadcastAppManager 和 broadcastContainer。接著，請啟動新的 VideoPlayer 和 AdManager 物件。

/** Main HbbTV Application. */
var HbbTVApp = function() {
  this.broadcastAppManager = document.getElementById('broadcast-app-manager');
  this.broadcastContainer = document.getElementById('broadcast-video');

  this.playState = -1; // -1 as null play state.

  try {
    this.applicationManager =
        this.broadcastAppManager.getOwnerApplication(document);
    this.applicationManager.show();
    this.broadcastContainer.bindToCurrentChannel();
    this.subscribedToStreamEvents = false;
    this.broadcastContainer.addEventListener(
        'PlayStateChange', this.onPlayStateChangeEvent.bind(this));

    debugView.log('HbbTVApp: App loaded');
    this.videoPlayer = new VideoPlayer();
    this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));
  } catch (e) {
    debugView.log('HbbTVApp: No HbbTV device detected.');
    return;
  }

  this.adManager = new AdManager(this.videoPlayer);
};application.js

發出 IMA 串流請求

在 HbbTVApp.onPlayStateChangeEvent() 方法中，發出串流要求，回應應用程式切換至 PRESENTING_PLAYSTATE 的應用程式。這個方法可讓應用程式做好準備，載入廣告連播資訊清單來回應 AD_BREAK_EVENT_ANNOUNCE 事件。

if (!this.subscribedToStreamEvents &&
    this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
  this.subscribedToStreamEvents = true;
  this.broadcastContainer.addStreamEventListener(
      STREAM_EVENT_URL, 'eventItem', function(event) {
        this.onStreamEvent(event);
      }.bind(this));
  debugView.log('HbbTVApp: Subscribing to stream events.');
  this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}application.js

如果裝置未正確發出廣播容器 PlayStateChange 事件，請使用 setInterval() 函式檢查播放狀態變更：

setInterval(function() {
      if (!subscribedToStreamEvents &&
            this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
        subscribedToStreamEvents = true;
        this.broadcastContainer.addStreamEventListener(
            STREAM_EVENT_URL, 'eventItem', function(event) {
              this.onStreamEvent(event);
            }.bind(this));
        debugView.log('Subscribing to stream events');
        this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
      }
      …

監聽 HbbTV 串流事件

建立 HbbTVApp.onStreamEvent() 方法以監聽廣告插播事件 adBreakAnnounce、adBreakStart 和 adBreakEnd：

/**
 * Callback for HbbTV stream event.
 * @param {!Event} event Stream event payload.
 */
HbbTVApp.prototype.onStreamEvent = function(event) {
  var eventData = JSON.parse(event.text);
  var eventType = eventData.type;
  if (eventType == AD_BREAK_EVENT_ANNOUNCE) {
    this.onAdBreakAnnounce(eventData);
  } else if (eventType == AD_BREAK_EVENT_START) {
    this.onAdBreakStart(eventData);
  } else if (eventType == AD_BREAK_EVENT_END) {
    this.onAdBreakEnd(eventData);
  }
};application.js

處理 HbbTV 串流事件

如要處理 HbbTV 串流事件，請完成下列步驟：

如要載入廣告連播資訊清單，以回應 adBreakAnnounce 事件，請建立 HbbTVApp.onAdBreakAnnounce() 方法：

/**
 * Callback function on ad break announce stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
  var eventType = event.type;
  var eventDuration = event.duration;
  var eventOffset = event.offset;
  debugView.log(
      'HbbTV event: ' + eventType + ' duration: ' + eventDuration +
      's offset: ' + eventOffset + 's');
  this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);
};application.js

如要在廣告插播期間切換至廣告串流播放，請建立 HbbTVApp.onAdBreakStart() 方法：

/**
 * Callback function on ad break start stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakStart = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  if (!this.videoPlayer.isPreloaded()) {
    debugView.log('HbbTVApp: Switch aborted. ' +
                  'The ad preloading buffer is insufficient.');
    return;
  }
  this.stopBroadcast();
  this.videoPlayer.play();
};application.js

如要返回內容廣播，請建立 HbbTVApp.onAdBreakEnd() 方法：

/**
 * Callback function on ad break end stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakEnd = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  this.videoPlayer.stop();
  this.resumeBroadcast();
};application.js

現在，您已在 HbbTV 應用程式中要求並顯示 IMA SDK 廣告連播。如要比較您的應用程式與已完成的範例應用程式，請參閱 GitHub 上的 IMA HbbTV 範例。

建立廣告管理員類別