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

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

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

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

application.js এ অ্যাপ্লিকেশন ক্লাসটি ইনিশিয়ালাইজ করুন এবং 'Handling the broadcast a/v object' টিউটোরিয়ালটি অনুসরণ করে ` 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-এর স্ট্রিম ইভেন্টগুলো শুনুন

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 নমুনাটি দেখুন।

পূর্ববর্তী
বিজ্ঞাপন ম্যানেজার ক্লাস তৈরি করুন