راه‌اندازی کلاس بازیکن

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

راه‌اندازی پخش‌کننده پهن‌باند

با ایجاد برچسب‌های ویدیو و برچسب‌های پوششی، مشخص کنید که پخش‌کننده پهن‌باند در کجای برنامه‌تان قرار بگیرد:

<div id="broadband-wrapper">
    <video id="broadband-video"></video>
</div>

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

کلاس پخش‌کننده ویدیو را با متغیرهایی برای عناصر 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');
};

تعریف کردن عملکردهای کنترل بازپخش

برای نشان دادن پخش‌کننده آگهی و پیوست کردن نمای ویدیو، روش 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();
};

پیش‌بار کردن مانیفست جاری‌سازی آگهی

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

۱. پیش‌بار کردن جاری‌سازی آگهی

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

/**
 * 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');
};

۲. بررسی میان‌گیر آگهی پیش‌بارشده

روش VideoPlayer.isPreloaded() را ایجاد کنید تا بررسی شود که آیا میان‌گیر آگهی کافی در مقایسه با آستانه میان‌گیر تنظیم‌شده در برنامه پیش‌بارگیری شده است یا نه:

// Ads will only play with 10 or more seconds of ad loaded.
var MIN_BUFFER_THRESHOLD = 10;
 
/**
 * 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;
};

پیوست کردن شنوندگان پخش‌کننده

برای افزودن شنوندگان رویداد برای رویداد پخش‌کننده dash.js، روش VideoPlayer.attachPlayerListener() را ایجاد کنید: PLAYBACK_PLAYING، PLAYBACK_ENDED، LOG، و ERROR. This method also handles events for the scheme ID URI, in addition to setting the clean-up function to remove these listeners.

var SCHEME_ID_URI = 'https://developer.apple.com/streaming/emsg-id3';
 
/** 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);
    }
  };
};

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

برای مدیریت بازپخش دسته آگهی براساس رویدادهای پخش‌کننده، روش‌های 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();
  }
};

ایجاد تنظیم‌کننده برای رویداد onAdPodEnded

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

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

مدیریت رویدادهای فراداده جاری‌سازی

با ایجاد کردن روش VideoPlayer.setEmsgEventHandler()، تابع بازخوانی‌ای تنظیم کنید که براساس رویدادهای emsg اجرا شود. برای این راهنما، پارامتر scope را اضافه کنید، زیرا setEmsgEventHandler() را خارج از 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;
};

نمایش و پنهان کردن پخش‌کننده ویدیو برای وقفه‌های آگهی

برای نمایش پخش‌کننده ویدیو درطول وقفه‌های آگهی و پنهان کردن پخش‌کننده پس‌از پایان وقفه آگهی، روش‌های 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';
};

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

قبلی
شروع به کار در HbbTV
بعدی
ساختن کلاس مدیر آگهی