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 để tạo yêu cầu về luồng, lấy tệp kê khai nhóm quảng cáo, theo dõi các sự kiện luồng 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à thiết lập trình theo dõi cho các sự kiện luồng IMA. Trong lệnh gọi này, hãy thiết lập 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á thành phần tuỳ chỉnh của luồng. Kiểm thử ứng dụng HbbTV bằng luồng phân phát nhóm DASH mẫu IMA với các tham 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();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  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 đã xác thực 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('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

Ứng dụng mẫu HbbTV sử dụng giá trị duy nhất được tạo ngẫu nhiên adBreakId. Trong các ứng dụng sản xuất, giá trị adBreakId là một chuỗi gồm chữ và số (ví dụ: ab-001) tăng thêm một cho mỗi điểm chèn quảng cáo. Xác minh rằng giá trị adBreakId là giá trị giống nhau cho tất cả người xem (điểm) chèn quảng cáo. Để lấy giá trị adBreakId, chúng tôi khuyên bạn nên sử dụng API khoảng thời gian quảng cáo DAI. Trong môi trường sản xuất, hãy đưa giá trị adBreakId và giá trị podDuration vào sự kiện luồng HbbTV AD_BREAK_ANNOUNCE.

auth-token

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