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

في ads_manager.js، حدِّد فئة التفاف لـ StreamManager في حزمة IMA SDK تُرسِل طلبات البث، وتحصل على بيان حزمة الإعلانات، وتستمع إلى أحداث البث في حزمة IMA، وتمرِّر أحداث 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 باستخدام عيّنة بث من IMA تعرض حزمة DASH مع مَعلمات البث التالية:

  • رمز الشبكة: '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، ننصحك باستخدام واجهة برمجة التطبيقات إشعارات فواصل إعلانية مبكرة (EABN). في بيئة الإنتاج، أدرِج podId وpodDuration في حدث بث HbbTV AD_BREAK_ANNOUNCE.

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

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