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ơ bản này để yêu cầu một luồng IMA và phản hồi các sự kiện tạm dừng 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

Đưa ra yêu cầu về luồng IMA

Trong phương thức HbbTVApp.onPlayStateChangeEvent(), hãy đưa ra yêu cầu về luồng để phản hồi việc ứng dụng chuyển sang PRESENTING_PLAYSTATE. Phương pháp này chuẩn bị cho ứng dụng của bạn tải tệp kê khai nhóm quảng cáo để phản hồi một 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 vùng chứa truyền tin PlayStateChange, hãy 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 đ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 tiếp 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 chế độ phát luồng quảng cáo trong thời gian tạm dừng 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 nội dung phát sóng, 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 SDK IMA 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 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