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. Để biết ví dụ về một lớp tương tự, hãy xem phần Xử lý đối tượng a/v truyền tin.

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

Khởi chạy ứng dụng

Khởi chạy 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 truyền tin. 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 phát trực tuyến IMA

Trong phương thức HbbTVApp.onPlayStateChangeEvent(), hãy tạo một yêu cầu truyền trực tuyến để phản hồi ứ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 ra chính xác sự kiện PlayStateChange của vùng chứa thông báo truyền tin, 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);
      }
      …

Nghe các sự kiện phát trực tuyến trên HbbTV

Tạo phương thức HbbTVApp.onStreamEvent() để nghe các sự kiện điểm chèn 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 phát trực tuyến trên HbbTV

Để xử lý các sự kiện phát trực tuyến 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 nhằm 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 chế độ phát luồng quảng cáo trong thời điểm chèn 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 truyền phát 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

Bạn hiện đang yêu cầu và hiển thị các nhóm quảng cáo SDK IMA trong ứng dụng HbbTV của mình. Để so sánh ứng dụng của bạn với một ứng dụng mẫu hoàn chỉnh, 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