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

ملاحظة: قبل متابعة هذا الدليل، عليك إكمال الخطوات الواردة في إنشاء فئة "مدير الإعلانات".

في application.js، أنشِئ الفئة الرئيسية لتطبيق HbbTV كي تتفاعل مع بث HbbTV. تتفاعل هذه الفئة مع broadcastAppManager وbroadcastContainer. للحصول على مثال لفئة مماثلة، يمكنك الاطّلاع على التعامل مع كائن البث a/v.

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

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

يمكنك بدء فئة التطبيق في 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، أكمِل الخطوات التالية:

1. لتحميل بيان مجموعة الإعلانات المتسلسلة استجابةً لحدث 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

2. للتبديل إلى تشغيل بث الإعلان أثناء الفواصل الإعلانية، أنشِئ طريقة 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

3. للرجوع إلى بث المحتوى، أنشئ 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

أنت تطلب الآن من مجموعات الإعلانات المتسلسلة لحزمة تطوير البرامج لإعلانات الوسائط التفاعلية وتعرضها في تطبيق HbbTV. ولمقارنة تطبيقك بنموذج تطبيق مكتمل، يُرجى الاطّلاع على نموذج إعلانات الوسائط التفاعلية لـ HbbTV على GitHub.