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

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 स्ट्रीम इवेंट सुनना

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

पीछे जाएं
Ads मैनेजर क्लास बनाना