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

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

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

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

অ্যাপ্লিকেশন ইনিশিয়ালাইজ করা

application.js-এ অ্যাপ্লিকেশন ক্লাস ইনিশিয়ালাইজ করুন, broadcastAppManager এবং broadcastContainer টিউটোরিয়াল অনুসরণ করে সেট-আপ করুন, ব্রডকাস্ট 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 স্যাম্পেল দেখুন।