کلاس پخش را تنظیم کنید

توجه: قبل از ادامه این راهنما، باید مراحل موجود در بخش «شروع به کار با IMA SDK در HbbTV» را تکمیل کنید.

در video_player.js ، یک کلاس wrapper برای پخش‌کننده‌ی ویدیو تعریف کنید تا پخش‌کننده‌ی dash.js را راه‌اندازی و کنترل کند.

پخش‌کننده پهنای باند را تنظیم کنید

با ایجاد تگ‌های video و wrapper، محل قرارگیری پخش‌کننده‌ی پهنای باند را در برنامه‌ی خود مشخص کنید:

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

پخش کننده ویدیو را ایجاد کنید

کلاس پخش‌کننده ویدیو را با متغیرهایی برای عناصر HTML، پخش‌کننده dash.js و فراخوانی‌هایی که سایر متدهای کلاس می‌توانند از آنها استفاده کنند، مقداردهی اولیه کنید.

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

تعریف توابع کنترل پخش

برای نمایش پخش‌کننده‌ی تبلیغات و پیوست کردن نمای ویدیو، متد VideoPlayer.play() را ایجاد کنید. پس از آن، متد create VideoPlayer.stop() را برای مدیریت پاکسازی پس از اتمام غلاف‌های تبلیغاتی ایجاد کنید.

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

مانیفست جریان تبلیغات را از قبل بارگذاری کنید

برای تأیید اینکه تبلیغات به اندازه کافی در طول پخش محتوا و قبل از شروع نمایش تبلیغات بارگذاری شده‌اند، از VideoPlayer.preload() و VideoPlayer.isPreloaded() استفاده کنید.

۱. پیش بارگذاری جریان تبلیغات

متد VideoPlayer.preload() را برای پیش‌بارگذاری مانیفست پخش تبلیغات و ایجاد یک بافر تبلیغاتی قبل از وقفه تبلیغاتی ایجاد کنید. شما باید تنظیمات پخش پخش‌کننده 'cacheInitSegments' به true به‌روزرسانی کنید. با به‌روزرسانی تنظیمات، ذخیره‌سازی بخش‌های اولیه را فعال می‌کنید که از تأخیر هنگام تغییر به تبلیغات جلوگیری می‌کند.

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

۲. بافر تبلیغاتی از پیش بارگذاری شده را بررسی کنید

متد VideoPlayer.isPreloaded() را ایجاد کنید تا بررسی کنید که آیا بافر تبلیغاتی به اندازه کافی در مقایسه با آستانه بافر تنظیم شده در برنامه، از قبل بارگذاری شده است یا خیر:

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

شنونده‌های پخش‌کننده را ضمیمه کنید

برای افزودن شنونده‌های رویداد برای رویداد player در dash.js، متد VideoPlayer.attachPlayerListener() را ایجاد کنید: PLAYBACK_PLAYING ، PLAYBACK_ENDED ، LOG و ERROR . این متد علاوه بر تنظیم تابع پاکسازی برای حذف این شنونده‌ها، رویدادهای مربوط به طرح ID URI را نیز مدیریت می‌کند.

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

تنظیم فراخوانی‌های رویداد بازیکن

برای مدیریت پخش پاد تبلیغات بر اساس رویدادهای پخش‌کننده، متدهای VideoPlayer.onAdPodPlaying() ، VideoPlayer.onAdPodEnded() و 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

تنظیم‌کننده (setter) رویداد onAdPodEnded را ایجاد کنید.

با ایجاد متد VideoPlayer.setOnAdPodEnded() یک تابع فراخوانی تنظیم کنید که هنگام پایان یک پاد تبلیغاتی اجرا شود. کلاس app از این متد برای از سرگیری پخش محتوا پس از وقفه‌های تبلیغاتی استفاده می‌کند.

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

مدیریت رویدادهای فراداده جریان

با ایجاد متد VideoPlayer.setEmsgEventHandler() یک تابع فراخوانی تنظیم کنید که بر اساس رویدادهای emsg اجرا شود. برای این راهنما، هنگام فراخوانی setEmsgEventHandler() خارج از video_player.js ، پارامتر scope را نیز اضافه کنید.

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

نمایش و پنهان کردن پخش‌کننده ویدیو برای نمایش تبلیغات

برای نمایش پخش‌کننده ویدیو در طول نمایش تبلیغات و پنهان کردن پخش‌کننده پس از پایان نمایش تبلیغات، متدهای VideoPlayer.show() و 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

در مرحله بعد، یک کلاس مدیریت تبلیغات ایجاد کنید تا از IMA SDK برای ایجاد درخواست پخش جریان، دریافت مانیفست یک پاد تبلیغات، گوش دادن به رویدادهای پخش جریان IMA و ارسال رویدادهای emsg به IMA SDK استفاده کند.