کلاس برنامه را بسازید

در application.js ، کلاس اصلی را برای برنامه HbbTV خود ایجاد کنید که با پخش HbbTV تعامل دارد. این کلاس با broadcastAppManager و broadcastContainer تعامل دارد. برای مثالی از یک کلاس مشابه، مدیریت شیء پخش a/v را ببینید.

این برنامه پایه HbbTV را تغییر دهید تا یک جریان IMA درخواست کند و به رویدادهای وقفه آگهی پاسخ دهد.

برنامه را راه اندازی کنید

کلاس برنامه را در application.js راه اندازی کنید، broadcastAppManager و broadcastContainer به دنبال آموزش، Handling the broadcast a/v اجرا کنید . پس از آن، اشیاء 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() برای بررسی تغییرات playstate استفاده کنید:

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() را برای گوش دادن به رویدادهای ad break 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 مراجعه کنید.

قبلی
کلاس مدیر تبلیغات را ایجاد کنید