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

ध्यान दें: इस गाइड में आगे बढ़ने से पहले, आपको Ads Manager क्लास बनाएं में दिए गए चरणों को पूरा करना होगा.

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

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

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

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

विज्ञापन के लिए ब्रेक के इवेंट सुनने के लिए, 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 का सैंपल देखें.