إعداد فئة اللاعب

في video_player.js، حدِّد فئة برنامج تضمين مشغّل الفيديو لبدء تشغيل مشغّل 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() الطريقة. بعد ذلك، أنشئ طريقة 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().

1. التحميل المُسبق لبث الإعلان

يمكنك إنشاء طريقة 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

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) لمعرّف المخطط، بالإضافة إلى إعداد وظيفة تنظيف لإزالة المستمعين هؤلاء.

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(). تستخدم فئة التطبيق هذه الطريقة لاستئناف بث المحتوى بعد الفواصل الإعلانية.

/**
 * 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(). بالنسبة إلى هذا الدليل، أدرِج المَعلمة 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

بعد ذلك، أنشئ فئة لمدير الإعلانات لاستخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية من أجل تقديم طلب بث، والحصول على بيان مجموعة الإعلانات المتسلسلة، والاستماع إلى أحداث بث إعلانات الوسائط التفاعلية، وتمرير أحداث الرسائل الإلكترونية إلى حزمة تطوير البرامج لإعلانات الوسائط التفاعلية.

السابق
بدء استخدام HbbTV
التالي
إنشاء فئة "مدير الإعلانات"