تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

في application.js، أنشئ الفئة الرئيسية لتطبيق HbbTV الذي يتفاعل مع بث HbbTV. يتفاعل هذا الصف مع broadcastAppManager وbroadcastContainer. للاطّلاع على مثال على فئة مشابهة، يُرجى الاطّلاع على معالجة عنصر الصوت والصورة للبث.

عدِّل تطبيق HbbTV الأساسي هذا لطلب بث IMA والاستجابة لأحداث الفاصل الإعلاني.

إعداد التطبيق

يمكنك بدء فئة التطبيق في application.js وإعداد broadcastAppManager وbroadcastContainer باتّباع البرنامج التعليمي، معالجة عنصر البث الصوتي/المرئي. بعد ذلك، ابدأ بإنشاء عناصر VideoPlayer وAdManager جديدة.

/** Main HbbTV Application. */
var HbbTVApp = function() {
  this.broadcastAppManager = document.getElementById('broadcast-app-manager');
  this.broadcastContainer = document.getElementById('broadcast-video');

  this.playState = -1; // -1 as null play state.

  try {
    this.applicationManager =
        this.broadcastAppManager.getOwnerApplication(document);
    this.applicationManager.show();
    this.broadcastContainer.bindToCurrentChannel();
    this.subscribedToStreamEvents = false;
    this.broadcastContainer.addEventListener(
        'PlayStateChange', this.onPlayStateChangeEvent.bind(this));

    debugView.log('HbbTVApp: App loaded');
    this.videoPlayer = new VideoPlayer();
    this.videoPlayer.setOnAdPodEnded(this.resumeBroadcast.bind(this));
  } catch (e) {
    debugView.log('HbbTVApp: No HbbTV device detected.');
    return;
  }

  this.adManager = new AdManager(this.videoPlayer);
};application.js

تقديم طلب بث عبر IMA

في طريقة HbbTVApp.onPlayStateChangeEvent()، قدِّم طلب بث في استجابة لتبديل التطبيق إلى PRESENTING_PLAYSTATE. يُعدّ هذا النهج تطبيقك لتحميل بيان مجموعة الإعلانات استجابةً لحدث AD_BREAK_EVENT_ANNOUNCE.

if (!this.subscribedToStreamEvents &&
    this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
  this.subscribedToStreamEvents = true;
  this.broadcastContainer.addStreamEventListener(
      STREAM_EVENT_URL, 'eventItem', function(event) {
        this.onStreamEvent(event);
      }.bind(this));
  debugView.log('HbbTVApp: Subscribing to stream events.');
  this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
}application.js

إذا لم يُرسِل جهازك بشكل صحيح حدث PlayStateChange حاوية البث، استخدِم الدالة setInterval() للتحقّق من التغييرات في حالة التشغيل:

setInterval(function() {
      if (!subscribedToStreamEvents &&
            this.broadcastContainer.playState == PRESENTING_PLAYSTATE) {
        subscribedToStreamEvents = true;
        this.broadcastContainer.addStreamEventListener(
            STREAM_EVENT_URL, 'eventItem', function(event) {
              this.onStreamEvent(event);
            }.bind(this));
        debugView.log('Subscribing to stream events');
        this.adManager.requestStream(NETWORK_CODE, CUSTOM_ASSET_KEY);
      }
      …

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

أنشئ طريقة HbbTVApp.onStreamEvent() للاستماع إلى أحداث الفواصل الإعلانية adBreakAnnounce وadBreakStart وadBreakEnd:

/**
 * Callback for HbbTV stream event.
 * @param {!Event} event Stream event payload.
 */
HbbTVApp.prototype.onStreamEvent = function(event) {
  var eventData = JSON.parse(event.text);
  var eventType = eventData.type;
  if (eventType == AD_BREAK_EVENT_ANNOUNCE) {
    this.onAdBreakAnnounce(eventData);
  } else if (eventType == AD_BREAK_EVENT_START) {
    this.onAdBreakStart(eventData);
  } else if (eventType == AD_BREAK_EVENT_END) {
    this.onAdBreakEnd(eventData);
  }
};application.js

التعامل مع أحداث بث HbbTV

لمعالجة أحداث بث HbbTV، أكمِل الخطوات التالية:

لتحميل بيان مجموعة الإعلانات استجابةً للحدث adBreakAnnounce، أنشئ الطريقة HbbTVApp.onAdBreakAnnounce():

/**
 * Callback function on ad break announce stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakAnnounce = function(event) {
  var eventType = event.type;
  var eventDuration = event.duration;
  var eventOffset = event.offset;
  debugView.log(
      'HbbTV event: ' + eventType + ' duration: ' + eventDuration +
      's offset: ' + eventOffset + 's');
  this.adManager.loadAdPodManifest(NETWORK_CODE, CUSTOM_ASSET_KEY, eventDuration);
};application.js

للتبديل إلى تشغيل إعلانات أثناء الفواصل الإعلانية، أنشئ الطريقة HbbTVApp.onAdBreakStart():

/**
 * Callback function on ad break start stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakStart = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  if (!this.videoPlayer.isPreloaded()) {
    debugView.log('HbbTVApp: Switch aborted. ' +
                  'The ad preloading buffer is insufficient.');
    return;
  }
  this.stopBroadcast();
  this.videoPlayer.play();
};application.js

للرجوع إلى بث المحتوى، أنشئ HbbTVApp.onAdBreakEnd() الطريقة التالية:

/**
 * Callback function on ad break end stream event.
 * @param {!Event} event HbbTV stream event payload.
 */
HbbTVApp.prototype.onAdBreakEnd = function(event) {
  debugView.log('HbbTV event: ' + event.type);
  this.videoPlayer.stop();
  this.resumeBroadcast();
};application.js

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

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