ساختن کلاس برنامه

توجه: قبل‌از ادامه دادن با این راهنما، باید مراحل موجود در ایجاد کلاس مدیر آگهی‌ها را تکمیل کنید.

در 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، مراحل زیر را تکمیل کنید:

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 مراجعه کنید.