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 IMA SDK để đư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 IMA SDK.

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

Đư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 một đố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 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();
  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);
};

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

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

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 một 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);
};

Ứng dụng mẫu HbbTV sử dụng giá trị adBreakId duy nhất được tạo ngẫu nhiên. Trong các ứng dụng phát hành công khai, 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à cùng một giá trị cho tất cả người xem điểm chèn quảng cáo. Để nhận giá trị adBreakId, 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 thêm giá trị adBreakId và giá trị 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