ऐप्लिकेशन क्लास बनाएं

ध्यान दें: इस गाइड के साथ आगे बढ़ने से पहले, आपको विज्ञापन मैनेजर क्लास बनाने का तरीका में दिए गए चरण पूरे करने होंगे.

application.js में, अपने HbbTV ऐप्लिकेशन के लिए मुख्य क्लास बनाएं. यह क्लास, HbbTV ब्रॉडकास्ट के साथ इंटरैक्ट करती है. यह क्लास, broadcastAppManager और broadcastContainer के साथ इंटरैक्ट करती है. इसी तरह की क्लास का उदाहरण देखने के लिए, ब्रॉडकास्ट a/v ऑब्जेक्ट को मैनेज करना लेख पढ़ें.

IMA स्ट्रीम का अनुरोध करने और विज्ञापन दिखाने के समय से जुड़े इवेंट के जवाब देने के लिए, इस बेस HbbTV ऐप्लिकेशन में बदलाव करें.

ऐप्लिकेशन को शुरू करना

application.js में, ऐप्लिकेशन क्लास को शुरू करें. साथ ही, ट्यूटोरियल ब्रॉडकास्ट a/v ऑब्जेक्ट को मैनेज करना में दिए गए निर्देशों के मुताबिक, 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 का सैंपल देखें.