অ্যাপ্লিকেশন ক্লাস তৈরি করুন

দ্রষ্টব্য: এই নির্দেশিকাটি অনুসরণ করার আগে, আপনাকে বিজ্ঞাপন পরিচালক তৈরি করুন ক্লাসের ধাপগুলি সম্পূর্ণ করতে হবে।

application.js এ, আপনার HbbTV অ্যাপের জন্য একটি প্রধান ক্লাস তৈরি করুন যা HbbTV ব্রডকাস্টের সাথে ইন্টারঅ্যাক্ট করে। এই ক্লাসটি broadcastAppManager এবং broadcastContainer এর সাথে ইন্টারঅ্যাক্ট করে। অনুরূপ ক্লাসের উদাহরণের জন্য, broadcast a/v অবজেক্ট পরিচালনা করা দেখুন।

IMA স্ট্রিম অনুরোধ করতে এবং বিজ্ঞাপন বিরতি ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে এই বেস HbbTV অ্যাপটি পরিবর্তন করুন।

অ্যাপ্লিকেশনটি শুরু করুন

application.js এ অ্যাপ্লিকেশন ক্লাসটি শুরু করুন, broadcastAppManager সেট আপ করুন এবং broadcastContainer টিউটোরিয়ালটি অনুসরণ করুন, যা "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() ফাংশনটি ব্যবহার করুন:

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 স্ট্রিম ইভেন্টগুলি শুনুন

adBreakAnnounce , adBreakStart , এবং adBreakEnd বিজ্ঞাপন বিরতির ইভেন্টগুলি শোনার জন্য HbbTVApp.onStreamEvent() পদ্ধতি তৈরি করুন:

/**
 * 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 অ্যাপে IMA SDK অ্যাড পডের অনুরোধ করছেন এবং প্রদর্শন করছেন। একটি সম্পূর্ণ নমুনা অ্যাপের সাথে আপনার অ্যাপের তুলনা করতে, GitHub-এ IMA HbbTV নমুনাটি দেখুন।