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

Trong ads_manager.js, hãy xác định một lớp trình bao bọc cho StreamManager của SDK IMA để đưa ra các yêu cầu về luồng phát, nhận tệp kê khai nhóm quảng cáo, theo dõi các sự kiện luồng phát IMA và truyền các sự kiện emsg đến SDK IMA.

Trong ads_manager.js, ứng dụng mẫu IMA HbbTV thiết lập các phương thức sau:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

Khởi chạy trình quản lý quảng cáo

Khởi chạy lớp trình quản lý quảng cáo và đặt trình nghe cho các sự kiện phát trực tiếp của IMA. Trong lệnh gọi này, hãy đặt trình xử lý sự kiện emsg bằng phương thức VideoPlayer.setEmsgEventHandler().

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

Đưa ra yêu cầu về luồng nhóm quảng cáo

Tạo phương thức AdManager.requestStream() để tạo đối tượng PodStreamRequest bằng mã mạng Google Ad Manager và khoá tài sản tuỳ chỉnh của luồng phát. Kiểm thử ứng dụng HbbTV bằng cách sử dụng luồng phân phát nhóm DASH mẫu của IMA với các thông số luồng sau:

  • Mã mạng: '21775744923'
  • Khoá thành phần tuỳ chỉnh: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

Theo dõi các sự kiện luồng quảng cáo

Tạo phương thức AdManager.onStreamEvent() để xử lý phản hồi của ứng dụng đối với các sự kiện luồng IMA, STREAM_INITIALIZED, AD_BREAK_STARTED và AD_BREAK_ENDED.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

Xử lý siêu dữ liệu luồng quảng cáo

Để truyền thông tin sự kiện emsg đến IMA, hãy tạo phương thức AdManager.onEmsgEvent() bằng phương thức StreamManager.processMetadata(). Lớp trình phát video gọi phương thức này bằng phương thức VideoPlayer.setEmsgEventHandler().

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

Tải tệp kê khai nhóm quảng cáo

Tạo phương thức AdManager.loadAdPodManifest() để tải trước tệp kê khai nhóm quảng cáo bằng trình phát video. Tạo URL tệp kê khai bằng cấu trúc trong Phương thức: Tệp kê khai nhóm DASH.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

Ứng dụng mẫu HbbTV sử dụng một podId duy nhất được tạo ngẫu nhiên. Trong các ứng dụng phát hành công khai, podId là một số nguyên bắt đầu từ 1 và tăng thêm 1 cho mỗi khoảng thời gian quảng cáo. Xác minh rằng podId có cùng giá trị cho tất cả người xem khoảng thời gian quảng cáo. Để nhận podId, bạn nên sử dụng API Thông báo điểm chèn quảng cáo sớm (EABN). Trong môi trường sản xuất, hãy thêm podId và podDuration vào sự kiện luồng HbbTV AD_BREAK_ANNOUNCE.

Tiếp theo, hãy tạo lớp ứng dụng chính cho ứng dụng HbbTV tương tác với chương trình phát sóng HbbTV.

Trước
Thiết lập lớp người chơi
Tiếp
Tạo lớp ứng dụng