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

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

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

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

با ایجاد تگ های ویدیویی و بسته بندی، مکان پخش کننده پهن باند را در برنامه خود تعیین کنید:

<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() را ایجاد کنید. پس از آن، متد 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() استفاده کنید.

1. جریان تبلیغات را از قبل بارگیری کنید

متد 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');
};
video_player.js

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

روش 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

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

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

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

تنظیم کننده را برای رویداد 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;
};
video_player.js

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

با ایجاد متد 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;
};
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 برای درخواست پخش جریانی، دریافت مانیفست غلاف آگهی، گوش دادن به رویدادهای جریان IMA و ارسال رویدادهای emsg به کیت توسعه نرم افزار IMA استفاده کنید.