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

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

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

অ্যাড ব্রেক ইভেন্টগুলি শুনতে 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

আপনি এখন আপনার HbbTV অ্যাপে IMA SDK বিজ্ঞাপন পডের অনুরোধ করছেন এবং প্রদর্শন করছেন৷ একটি সম্পূর্ণ নমুনা অ্যাপের সাথে আপনার অ্যাপের তুলনা করতে, GitHub-এ IMA HbbTV নমুনা দেখুন।