Membangun class aplikasi

Di application.js, buat class utama untuk aplikasi HbbTV yang berinteraksi dengan siaran HbbTV. Class ini berinteraksi dengan broadcastAppManager dan broadcastContainer. Untuk contoh class yang serupa, lihat Menangani objek a/v siaran.

Ubah aplikasi HbbTV dasar ini untuk meminta streaming IMA dan merespons peristiwa jeda iklan.

Melakukan inisialisasi aplikasi

Lakukan inisialisasi class aplikasi di application.js, siapkan broadcastAppManager, dan broadcastContainer dengan mengikuti tutorial, Menangani objek a/v siaran. Setelah itu, mulai objek VideoPlayer dan AdManager baru.

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

Membuat permintaan streaming IMA

Pada metode HbbTVApp.onPlayStateChangeEvent(), buat permintaan streaming sebagai respons terhadap peralihan aplikasi ke PRESENTING_PLAYSTATE. Pendekatan ini mempersiapkan aplikasi Anda untuk memuat manifes pod iklan sebagai respons terhadap peristiwa 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

Jika perangkat Anda tidak memunculkan peristiwa PlayStateChange penampung siaran dengan benar, gunakan fungsi setInterval() untuk memeriksa perubahan status pemutaran:

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

Mendengarkan acara streaming HbbTV

Buat metode HbbTVApp.onStreamEvent() untuk memproses peristiwa jeda iklan adBreakAnnounce, adBreakStart, dan 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

Menangani peristiwa streaming HbbTV

Untuk menangani peristiwa streaming HbbTV, selesaikan langkah-langkah berikut:

  1. Untuk memuat manifes pod iklan sebagai respons terhadap peristiwa adBreakAnnounce, buat metode 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. Untuk beralih ke pemutaran streaming iklan selama jeda iklan, buat metode 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. Untuk kembali ke siaran konten, buat metode 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

Sekarang Anda meminta dan menampilkan pod iklan IMA SDK di aplikasi HbbTV. Untuk membandingkan aplikasi Anda dengan aplikasi contoh yang telah selesai, lihat contoh IMA HbbTV di GitHub.

Sebelumnya
Membuat class pengelola iklan