لمناقشة منتجاتنا وتقديم ملاحظات بشأنها، انضمّ إلى قناة Discord الرسمية في "مدير إعلانات Google" على خادم منتدى Google للإعلان والقياس.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

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

في 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. من خلال تعديل الإعدادات، يمكنك تفعيل تخزين مقاطع 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، بالإضافة إلى ضبط وظيفة التنظيف لإزالة أدوات معالجة الأحداث هذه.

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.

بدء استخدام HbbTV

إنشاء فئة "مدير الإعلانات"