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

ملاحظة: قبل المتابعة في هذا الدليل، عليك إكمال الخطوات الواردة في مقالة البدء في استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية (IMA SDK) على HbbTV.

في 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(). بعد ذلك، أنشئ الطريقة 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

إنشاء أداة الضبط لحدث 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

التعامل مع أحداث البيانات الوصفية للبث

اضبط دالّة رد الاتصال التي يتم تشغيلها استنادًا إلى أحداث emsg من خلال إنشاء الطريقة 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

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