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

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

في 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.