Membuat class pengelola iklan

Catatan: Sebelum melanjutkan dengan panduan ini, Anda harus menyelesaikan langkah-langkah dalam Menyiapkan kelas pemain.

Di ads_manager.js, tentukan class wrapper untuk StreamManager IMA SDK yang membuat permintaan streaming, mendapatkan manifes pod iklan, memproses peristiwa streaming IMA, dan meneruskan peristiwa emsg ke IMA SDK.

Di ads_manager.js, aplikasi contoh IMA HbbTV menyiapkan metode berikut:

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

Lakukan inisialisasi pengelola iklan

Lakukan inisialisasi kelas pengelola iklan dan tetapkan pemroses untuk peristiwa streaming IMA. Dalam panggilan ini, tetapkan pengendali peristiwa emsg dengan metode VideoPlayer.setEmsgEventHandler().

Poin Penting: IMA SDK tidak mendukung UI iklan di HbbTV. Jangan teruskan parameter adUiElement dalam konstruktor StreamManager. Meneruskan adUiElement dapat menyebabkan Ad Manager menayangkan iklan yang tidak kompatibel.

/**
 * 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

Membuat permintaan untuk streaming pod iklan

Buat metode AdManager.requestStream() untuk membuat objek PodStreamRequest menggunakan kode jaringan Google Ad Manager dan kunci aset kustom streaming. Uji aplikasi HbbTV Anda menggunakan streaming penayangan pod DASH contoh IMA dengan parameter streaming berikut:

• Kode jaringan: '21775744923'
• Kunci aset kustom: '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

Memproses peristiwa aliran iklan

Buat metode AdManager.onStreamEvent() untuk menangani respons aplikasi Anda terhadap peristiwa streaming IMA, STREAM_INITIALIZED, AD_BREAK_STARTED, dan 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

Menangani metadata streaming iklan

Untuk meneruskan info peristiwa emsg ke IMA, buat metode AdManager.onEmsgEvent() menggunakan metode StreamManager.processMetadata(). Class pemutar video memanggil metode ini dengan metode 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

Memuat manifes pod iklan

Buat metode AdManager.loadAdPodManifest() untuk melakukan pramuat manifes pod iklan dengan pemutar video. Buat URL manifes menggunakan struktur dalam Metode: Manifes pod 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

Aplikasi contoh HbbTV menggunakan podId unik yang dibuat secara acak. Dalam aplikasi produksi, podId adalah bilangan bulat yang dimulai dari satu, dan bertambah satu untuk setiap jeda iklan. Pastikan podId memiliki nilai yang sama untuk semua penonton jeda iklan. Untuk mendapatkan podId, sebaiknya gunakan Early ad break notifications (EABN) API. Di lingkungan produksi, sertakan podId dan podDuration dalam peristiwa streaming HbbTV AD_BREAK_ANNOUNCE.

Selanjutnya, buat class aplikasi utama untuk aplikasi HbbTV yang berinteraksi dengan siaran HbbTV.