Tạo lớp ứng dụng

Trong application.js, hãy tạo lớp chính cho ứng dụng HbbTV tương tác với chương trình phát sóng HbbTV. Lớp này tương tác với broadcastAppManager và broadcastContainer. Để xem ví dụ về một lớp tương tự, hãy xem phần Xử lý đối tượng a/v chương trình phát sóng.

Sửa đổi ứng dụng HbbTV cơ sở này để yêu cầu một luồng IMA và phản hồi các sự kiện khoảng thời gian quảng cáo.

Khởi động ứng dụng

Khởi động lớp ứng dụng trong application.js, thiết lập broadcastAppManager, và broadcastContainer theo hướng dẫn Xử lý đối tượng a/v chương trình phát sóng. Sau đó, hãy khởi tạo các đối tượng VideoPlayer và AdManager mới.

/** 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

Tạo yêu cầu luồng IMA

Trong phương thức HbbTVApp.onPlayStateChangeEvent(), hãy tạo yêu cầu luồng để phản hồi việc ứng dụng chuyển sang PRESENTING_PLAYSTATE. Phương pháp này giúp ứng dụng của bạn chuẩn bị tải tệp kê khai nhóm quảng cáo để phản hồi sự kiện 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

Nếu thiết bị của bạn không phát đúng sự kiện PlayStateChange của vùng chứa chương trình phát sóng, hãy sử dụng hàm setInterval() để kiểm tra các thay đổi về trạng thái phát:

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);
      }
      …

Theo dõi các sự kiện luồng HbbTV

Tạo phương thức HbbTVApp.onStreamEvent() để theo dõi các sự kiện khoảng thời gian quảng cáo adBreakAnnounce, adBreakStart và 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

Xử lý các sự kiện luồng HbbTV

Để xử lý các sự kiện luồng HbbTV, hãy hoàn tất các bước sau:

  1. Để tải tệp kê khai nhóm quảng cáo để phản hồi sự kiện adBreakAnnounce, hãy tạo phương thức 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

  2. Để chuyển sang phát luồng quảng cáo trong khoảng thời gian quảng cáo, hãy tạo phương thức 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

  3. Để quay lại chương trình phát sóng nội dung, hãy tạo phương thức 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

Giờ đây, bạn đang yêu cầu và hiển thị các nhóm quảng cáo IMA SDK trong ứng dụng HbbTV. Để so sánh ứng dụng của bạn với một ứng dụng mẫu đã hoàn tất, hãy xem mẫu IMA HbbTV trên GitHub.

Trước
Tạo lớp trình quản lý quảng cáo