Menyiapkan class pemain

Di video_player.js, tentukan class wrapper pemutar video untuk memulai dan mengontrol pemutar dash.js.

Menyiapkan pemutar broadband

Tentukan tempat di aplikasi Anda untuk menempatkan pemutar broadband dengan membuat tag video dan wrapper:

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>
index.html

Buat pemutar video

Lakukan inisialisasi class pemutar video dengan variabel untuk elemen HTML, pemutar dash.js, dan callback yang dapat digunakan oleh metode class lainnya.

/**
 * Video player wrapper class to control ad creative playback with dash.js in
 * broadband.
 */
var VideoPlayer = function() {
  this.videoElement = document.querySelector('video');
  this.broadbandWrapper = document.getElementById('broadband-wrapper');
  this.player = dashjs.MediaPlayer().create();
  this.onAdPodEndedCallback = null;

  // Function passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.onCustomEventHandler = null;
  //  Scope (this) passed in VideoPlayer.prototype.setEmsgEventHandler.
  this.customEventHandlerScope = null;

  // Function to remove all of player event listeners.
  this.cleanUpPlayerListener = null;
  debugView.log('Player: Creating dash.js player');
};
video_player.js

Tentukan fungsi kontrol pemutaran

Untuk menampilkan pemutar iklan dan melampirkan tampilan video, buat metode VideoPlayer.play(). Setelah itu, buat metode VideoPlayer.stop() untuk menangani pembersihan setelah pod iklan selesai.

/** Starts playback of ad stream. */
VideoPlayer.prototype.play = function() {
  debugView.log('Player: Start playback');
  this.show();
  this.player.attachView(this.videoElement);
};

/** Stops ad stream playback and deconstructs player. */
VideoPlayer.prototype.stop = function() {
  debugView.log('Player: Request to stop player');
  if (this.cleanUpPlayerListener) {
    this.cleanUpPlayerListener();
  }
  this.player.reset();
  this.player.attachView(null);
  this.player.attachSource(null);
  this.player = null;
  this.hide();
};
video_player.js

Memuat manifes aliran iklan terlebih dahulu

Untuk memverifikasi bahwa iklan dimuat dengan cukup selama streaming konten dan sebelum jeda iklan dimulai, gunakan VideoPlayer.preload() dan VideoPlayer.isPreloaded().

1. Memuat terlebih dahulu stream iklan

Buat metode VideoPlayer.preload() untuk memuat manifes aliran iklan terlebih dahulu dan membuat buffer iklan sebelum jeda iklan. Anda harus memperbarui setelan streaming pemutar 'cacheInitSegments' menjadi true. Dengan memperbarui setelan, Anda mengaktifkan penyimpanan dalam cache segmen inisialisasi, yang menghindari penundaan saat beralih ke iklan.

/**
 * Starts ad stream prefetching into Media Source Extensions (MSE) buffer.
 * @param {string} url manifest url for ad stream playback.
 */
VideoPlayer.prototype.preload = function(url) {
  if (!this.player) {
    this.player = dashjs.MediaPlayer().create();
  }
  debugView.log('Player: init with ' + url);
  this.player.initialize(/* HTMLVideoElement */ null, url, /* autoplay */ true);

  this.player.updateSettings({
    'debug': {
      'logLevel': dashjs.Debug.LOG_LEVEL_WARNING,
      'dispatchEvent': true,  // flip to false to hide all debug events.
    },
    'streaming': {
      'cacheInitSegments': true,
    }
  });
  this.player.preload();
  this.attachPlayerListener();
  debugView.log('Player: Pre-loading into MSE buffer');
};
video_player.js

2. Memeriksa buffer iklan yang dimuat sebelumnya

Buat metode VideoPlayer.isPreloaded() untuk memeriksa apakah buffer iklan yang telah di-preload sudah cukup dibandingkan dengan nilai minimum buffer yang ditetapkan di aplikasi:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
video_player.js
 
/**
 * Checks if the ad is preloaded and ready to play.
 * @return {boolean} whether the ad buffer level is sufficient.
 */
VideoPlayer.prototype.isPreloaded = function() {
  var currentBufferLevel = this.player.getDashMetrics()
      .getCurrentBufferLevel('video', true);
  return currentBufferLevel >= MIN_BUFFER_THRESHOLD;
};
video_player.js

Melampirkan pemroses pemutar

Untuk menambahkan pemroses peristiwa untuk peristiwa pemutar dash.js, buat metode VideoPlayer.attachPlayerListener(): PLAYBACK_PLAYING, PLAYBACK_ENDED, LOG, dan ERROR. Metode ini juga menangani peristiwa untuk URI ID skema, selain menyetel fungsi pembersihan untuk menghapus pemroses ini.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
video_player.js
 
/** Attaches event listener for various dash.js events.*/
VideoPlayer.prototype.attachPlayerListener = function() {
  var playingHandler = function() {
    this.onAdPodPlaying();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
  var endedHandler = function() {
    this.onAdPodEnded();
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
  var logHandler = function(e) {
    this.onLog(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['LOG'], logHandler);
  var errorHandler = function(e) {
    this.onAdPodError(e);
  }.bind(this);
  this.player.on(dashjs.MediaPlayer.events['ERROR'], errorHandler);

  var customEventHandler = null;
  if (this.onCustomEventHandler) {
    customEventHandler =
        this.onCustomEventHandler.bind(this.customEventHandlerScope);
    this.player.on(SCHEME_ID_URI, customEventHandler);
  }

  this.cleanUpPlayerListener = function() {
    this.player.off(
        dashjs.MediaPlayer.events['PLAYBACK_PLAYING'], playingHandler);
    this.player.off(dashjs.MediaPlayer.events['PLAYBACK_ENDED'], endedHandler);
    this.player.off(dashjs.MediaPlayer.events['LOG'], logHandler);
    this.player.off(dashjs.MediaPlayer.events['ERROR'], errorHandler);
    if (customEventHandler) {
      this.player.off(SCHEME_ID_URI, customEventHandler);
    }
  };
};
video_player.js

Menetapkan callback peristiwa pemutar

Untuk mengelola pemutaran pod iklan berdasarkan peristiwa pemutar, buat metode VideoPlayer.onAdPodPlaying(), VideoPlayer.onAdPodEnded(), dan VideoPlayer.onAdPodError():

/**
 * Called when ad stream playback buffered and is playing.
 */
VideoPlayer.prototype.onAdPodPlaying = function() {
  debugView.log('Player: Ad Playback started');
};

/**
 * Called when ad stream playback has been completed.
 * Will call the restart of broadcast stream.
 */
VideoPlayer.prototype.onAdPodEnded = function() {
  debugView.log('Player: Ad Playback ended');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};

/**
 * @param {!Event} event The error event to handle.
 */
VideoPlayer.prototype.onAdPodError = function(event) {
  debugView.log('Player: Ad Playback error from dash.js player.');
  this.stop();
  if (this.onAdPodEndedCallback) {
    this.onAdPodEndedCallback();
  }
};
video_player.js

Buat setter untuk peristiwa onAdPodEnded

Tetapkan fungsi callback yang berjalan saat pod iklan berakhir dengan membuat metode VideoPlayer.setOnAdPodEnded(). Class aplikasi menggunakan metode ini untuk melanjutkan siaran konten setelah jeda iklan.

/**
 * Sets a callback function for when an ad pod has ended.
 * @param {!Function} callback Callback function.
 */
VideoPlayer.prototype.setOnAdPodEnded = function(callback) {
  this.onAdPodEndedCallback = callback;
};
video_player.js

Menangani peristiwa metadata streaming

Tetapkan fungsi callback yang berjalan berdasarkan peristiwa emsg dengan membuat metode VideoPlayer.setEmsgEventHandler(). Untuk panduan ini, sertakan parameter scope saat Anda memanggil setEmsgEventHandler() di luar video_player.js.

/**
 * Sets emsg event handler.
 * @param {!Function} customEventHandler Event handler.
 * @param {!Object} scope JS scope in which event handler function is called.
 */
VideoPlayer.prototype.setEmsgEventHandler = function(
    customEventHandler, scope) {
  this.onCustomEventHandler = customEventHandler;
  this.customEventHandlerScope = scope;
};
video_player.js

Menampilkan dan menyembunyikan pemutar video untuk jeda iklan

Untuk menampilkan pemutar video selama jeda iklan, dan menyembunyikan pemutar setelah jeda iklan selesai, buat metode VideoPlayer.show() dan VideoPlayer.hide():

/** Shows the video player. */
VideoPlayer.prototype.show = function() {
  debugView.log('Player: show');
  this.broadbandWrapper.style.display = 'block';
};

/** Hides the video player. */
VideoPlayer.prototype.hide = function() {
  debugView.log('Player: hide');
  this.broadbandWrapper.style.display = 'none';
};
video_player.js

Selanjutnya, buat class pengelola iklan untuk menggunakan IMA SDK guna membuat permintaan streaming, mendapatkan manifes pod iklan, memproses peristiwa streaming IMA, dan meneruskan peristiwa emsg ke IMA SDK.

Sebelumnya
Mulai di HbbTV
Berikutnya
Membuat class pengelola iklan