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

في ads_manager.js، حدِّد فئة التفاف لـ StreamManager في IMA SDK، وهي الفئة التي تُرسل طلبات البث، وتحصل على بيان مجموعة الإعلانات المتسلسلة، وتستمع إلى أحداث البث في IMA SDK، وتمرِّر أحداث emsg إلى IMA SDK.

في ads_manager.js، يضبط تطبيق IMA HbbTV النموذجي الطرق التالية:

  • requestStream()
  • onStreamEvent()
  • onEmsgEvent()
  • loadAdPodManifest()

تهيئة "مدير الإعلانات"

ابدأ فئة "مدير الإعلانات" واضبط أدوات معالجة أحداث بث IMA. في هذا الطلب، اضبط معالج أحداث emsg باستخدام الطريقة VideoPlayer.setEmsgEventHandler().

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};
ads_manager.js

إرسال طلب لبث مجموعة إعلانات متسلسلة

أنشئ طريقة AdManager.requestStream() لإنشاء عنصر PodStreamRequest باستخدام معرّف شبكة "إدارة إعلانات Google" ومفتاح الأصل المخصّص الخاص بالبث. اختبِر تطبيق HbbTV باستخدام عيّنة من بث عرض الإعلانات المتسلسلة بتنسيق DASH من IMA مع معلَمات البث التالية:

  • معرِّف الشبكة: '21775744923'
  • مفتاح العنصر المخصّص: 'hbbtv-dash'
/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function(networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';
  debugView.log('AdsManager: make PodStreamRequest');
  this.streamManager.requestStream(streamRequest);
};
ads_manager.js

الاستماع إلى أحداث بث الإعلانات

أنشئ طريقة AdManager.onStreamEvent() للتعامل مع استجابة تطبيقك لأحداث بث "إعلانات الوسائط التفاعلية"، STREAM_INITIALIZED وAD_BREAK_STARTED وAD_BREAK_ENDED.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};
ads_manager.js

التعامل مع البيانات الوصفية لتدفق الإعلانات

لتمرير معلومات حدث emsg إلى IMA، أنشئ طريقة AdManager.onEmsgEvent() باستخدام الطريقة StreamManager.processMetadata(). تستدعي فئة مشغّل الفيديو هذه الطريقة باستخدام الطريقة VideoPlayer.setEmsgEventHandler().

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};
ads_manager.js

تحميل بيان مجموعة الإعلانات المتسلسلة

أنشِئ طريقة AdManager.loadAdPodManifest() لتحميل بيان مجموعة الإعلانات المتسلسلة مسبقًا باستخدام مشغّل الفيديو. أنشئ عنوان URL لملف البيان باستخدام البنية الواردة في الطريقة: بيان حزمة DASH.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest =
    function(networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('IMA SDK: No DAI pod session registered.');
    return;
  }

  var MANIFEST_BASE_URL = 'https://dai.google.com/linear/pods/v1/dash/network/';
  // Method: DASH pod manifest reference docs:
  // https://developers.google.com/ad-manager/dynamic-ad-insertion/api/pod-serving/reference/live#method_dash_pod_manifest
  var manifestUrl = MANIFEST_BASE_URL + networkCode + '/custom_asset/' +
    customAssetKey + '/stream/' + this.streamData.streamId + '/pod/' +
    this.getPodId() + '/manifest.mpd?pd=' + podDuration;
  this.videoPlayer.preload(manifestUrl);
};
ads_manager.js

يستخدم نموذج تطبيق HbbTV podId فريدًا يتم إنشاؤه عشوائيًا. في تطبيقات الإنتاج، يكون podId عددًا صحيحًا يبدأ من واحد، ويزيد بمقدار واحد لكل فاصل إعلاني. تأكَّد من أنّ قيمة podId هي نفسها لجميع مشاهدي الفاصل الإعلاني. للحصول على podId، ننصحك باستخدام واجهة برمجة التطبيقات الخاصة بفواصل الإعلانات في "إدراج إعلان ديناميكي". في بيئة الإنتاج، أدرِج podId وpodDuration في حدث بث HbbTV AD_BREAK_ANNOUNCE.

بعد ذلك، أنشئ فئة التطبيق الرئيسية لتطبيق HbbTV التي تتفاعل مع بث HbbTV.

السابق
إعداد فئة اللاعب
التالي
إنشاء فئة التطبيق