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

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 का सैंपल देखें.

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