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

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

في 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 event بشكل صحيح، استخدِم الدالة 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

أنت الآن تطلب وتعرض مجموعات إعلانات متسلسلة من IMA SDK في تطبيق HbbTV. ولمقارنة تطبيقك بنموذج تطبيق مكتمل، يمكنك الاطّلاع على نموذج IMA HbbTV على GitHub.