वेब रिसीवर के लिए, विज्ञापन के लिए ब्रेक से जुड़े एपीआई की सुविधा जोड़ना

1. खास जानकारी

Google Cast का लोगो

इस कोडलैब में, पसंद के मुताबिक वेब पाने वाला ऐसा ऐप्लिकेशन बनाने का तरीका बताया गया है जो Cast Ad Breaks API का इस्तेमाल करता है.

Google Cast क्या है?

Google Cast, उपयोगकर्ताओं को मोबाइल डिवाइस से टीवी पर कॉन्टेंट कास्ट करने की सुविधा देता है. इसके बाद, उपयोगकर्ता अपने मोबाइल डिवाइस को टीवी पर मीडिया चलाने के लिए, रिमोट कंट्रोल के तौर पर इस्तेमाल कर सकते हैं.

Google Cast SDK से आपको अपने ऐप्लिकेशन का इस्तेमाल करके, टीवी या साउंड सिस्टम को कंट्रोल करने की सुविधा मिलती है. Cast SDK टूल की मदद से, Google Cast डिज़ाइन चेकलिस्ट के आधार पर, यूज़र इंटरफ़ेस (यूआई) के ज़रूरी कॉम्पोनेंट जोड़े जा सकते हैं.

Google Cast डिज़ाइन चेकलिस्ट को सभी समर्थित प्लैटफ़ॉर्म पर उपयोगकर्ता के अनुभव को सहज बनाने के लिए कास्ट लागू करने के मानक तय करने के लिए दिया जाता है.

हम क्या बनाने जा रहे हैं?

इस कोडलैब को पूरा करने के बाद, आपके पास एक कास्ट पाने वाला टूल होगा जो Break API का इस्तेमाल करता है.

आपको क्या सीखने को मिलेगा

  • कास्ट करने के लिए, कॉन्टेंट में VMAP और VAST ब्रेक शामिल करने का तरीका
  • ब्रेक वाले वीडियो की क्लिप को स्किप करने का तरीका
  • वीडियो खोजने के डिफ़ॉल्ट तरीके को पसंद के मुताबिक बनाने का तरीका

आपको किन चीज़ों की ज़रूरत होगी

  • नया Google Chrome ब्राउज़र.
  • एचटीटीपीएस होस्टिंग सेवा, जैसे कि Firebase होस्टिंग या ngrok.
  • इंटरनेट ऐक्सेस के साथ कॉन्फ़िगर किया गया Chromecast या Android TV जैसा कोई Google Cast डिवाइस.
  • एचडीएमआई इनपुट वाला टीवी या मॉनिटर या Google Home Hub

अनुभव

इस कोडलैब का इस्तेमाल करने से पहले, पक्का करें कि आपके पास यह अनुभव हो.

  • वेब डेवलपमेंट की सामान्य जानकारी.
  • Cast वेब रिसीवर ऐप्लिकेशन बनाना.

इस ट्यूटोरियल का इस्तेमाल कैसे किया जाएगा?

इसे सिर्फ़ पढ़ें इसे पढ़ें और कसरतों को पूरा करें

वेब ऐप्लिकेशन बनाने के अपने अनुभव को आप कितनी रेटिंग देंगे?

शुरुआती इंटरमीडिएट कुशल

2. सैंपल कोड पाएं

अपने कंप्यूटर पर सभी नमूना कोड डाउनलोड करें...

और डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.

3. रिसीवर को स्थानीय तौर पर डिप्लॉय करें

कास्ट डिवाइस के साथ अपने वेब रिसीवर का इस्तेमाल करने के लिए, इसे किसी ऐसी जगह पर होस्ट करना होगा जहां से आपका कास्ट डिवाइस उस तक पहुंच सके. अगर आपके पास पहले से ही ऐसा सर्वर है जिस पर एचटीटीपीएस काम करता है, तो नीचे दिए गए निर्देशों को छोड़ दें और यूआरएल को नोट कर लें, क्योंकि अगले सेक्शन में आपको इसकी ज़रूरत पड़ेगी.

अगर आपके पास इस्तेमाल करने के लिए कोई सर्वर नहीं है, तो Firebase होस्टिंग या ngrok का इस्तेमाल करें.

सर्वर चलाएं

अपनी पसंद की सेवा को सेट अप करने के बाद, app-start पर जाएं और अपना सर्वर चालू करें.

अपने होस्ट किए गए रिसीवर के यूआरएल को नोट कर लें. इसका इस्तेमाल अगले सेक्शन में किया जाएगा.

4. Cast Developer Console में कोई ऐप्लिकेशन रजिस्टर करना

Chromecast डिवाइसों पर, बिल्ट-इन इस कोडलैब के तौर पर, पसंद के मुताबिक रिसीवर का इस्तेमाल करने के लिए, आपको अपना ऐप्लिकेशन रजिस्टर करना होगा. ऐप्लिकेशन का रजिस्ट्रेशन करने के बाद, एक ऐप्लिकेशन आईडी जनरेट किया जाएगा. वेब पाने वाले ऐप्लिकेशन को लॉन्च करने के लिए, भेजने वाले ऐप्लिकेशन को कॉन्फ़िगर करना ज़रूरी है.

'नया ऐप्लिकेशन जोड़ें' वाले Google Cast SDK डेवलपर कंसोल की इमेज बटन हाइलाइट किया गया

"नया ऐप्लिकेशन जोड़ें" पर क्लिक करें

'नया रिसीवर ऐप्लिकेशन' की इमेज 'कस्टम रिसीवर' वाली स्क्रीन विकल्प हाइलाइट किया गया

"कस्टम प्राप्तकर्ता" चुनें, हम यही बना रहे हैं.

'नए कस्टम रिसीवर' की इमेज स्क्रीन पर एक यूआरएल दिख रहा है, जिसे कोई व्यक्ति 'पाने वाले ऐप्लिकेशन का यूआरएल' में टाइप कर रहा है फ़ील्ड

पैसे पाने वाले नए व्यक्ति की जानकारी डालें. उस URL का उपयोग करना न भूलें जहां आप अपने वेब प्राप्तकर्ता ऐप्लिकेशन को होस्ट करने की योजना बना रहे हैं. ऐप्लिकेशन रजिस्टर करने के बाद, कंसोल से जनरेट हुआ ऐप्लिकेशन आईडी को नोट कर लें. भेजने वाले के ऐप्लिकेशन को बाद के सेक्शन में, उस आइडेंटिफ़ायर का इस्तेमाल करने के लिए कॉन्फ़िगर किया जाएगा.

आपको एक Google Cast डिवाइस भी पंजीकृत करना होगा ताकि आपके द्वारा उसे प्रकाशित करने से पहले वह आपके प्राप्तकर्ता ऐप्लिकेशन को ऐक्सेस कर सके. अपना रिसीवर ऐप्लिकेशन प्रकाशित करने के बाद, वह सभी Google Cast डिवाइस पर उपलब्ध हो जाएगा. इस कोडलैब के लिए, हमारा सुझाव है कि ऐसे रिसीवर ऐप्लिकेशन के साथ काम करें जिसे पब्लिश नहीं किया गया है.

'नया डिवाइस जोड़ें' वाले Google Cast SDK डेवलपर कंसोल की इमेज बटन हाइलाइट किया गया

"नया डिवाइस जोड़ें" पर क्लिक करें

'कास्ट पाने वाला डिवाइस जोड़ें' की इमेज डायलॉग

अपने कास्ट डिवाइस के पीछे दिया गया सीरियल नंबर डालें और उसे ऐसा नाम दें जिससे डिवाइस के बारे में जानकारी मिलती हो. Google Cast SDK Developer Console को ऐक्सेस करते समय, Chrome में अपनी स्क्रीन कास्ट करके भी अपना सीरियल नंबर ढूंढा जा सकता है

रिसीवर और डिवाइस को टेस्ट के लिए तैयार होने में, 5 से 15 मिनट लगते हैं. 5-15 मिनट इंतज़ार करने के बाद आपको अपना कास्ट डिवाइस फिर से चालू करना होगा.

5. प्रोजेक्ट शुरू करें

कोडलैब का यह मॉड्यूल शुरू करने से पहले, विज्ञापन के लिए डेवलपर गाइड को देखना आपके लिए मददगार हो सकता है. इसमें, विज्ञापन के लिए ब्रेक के एपीआई के बारे में खास जानकारी दी गई है.

आपके द्वारा डाउनलोड किए गए प्रारंभ ऐप्लिकेशन में Google Cast के लिए समर्थन शामिल होना चाहिए. यहां Google Cast शब्दावली दी गई है, जिसका इस्तेमाल इस कोडलैब (कोड बनाना सीखना) में किया जाता है:

  • भेजने वाले का ऐप्लिकेशन मोबाइल डिवाइस या लैपटॉप पर चलता है,
  • Google Cast डिवाइस पर रिसीवर ऐप्लिकेशन चलता है.

अब आप अपने पसंदीदा टेक्स्ट एडिटर का इस्तेमाल करके, शुरुआती प्रोजेक्ट को पूरा करने के लिए तैयार हैं:

  1. सैंपल कोड डाउनलोड करके, फ़ोल्डर का आइकॉनapp-start डायरेक्ट्री को चुनें.
  2. js/receiver.js और index.html खोलें

ध्यान दें, कोडलैब के इस मॉड्यूल का इस्तेमाल करते समय, आपको जो वेब होस्टिंग सेवा चुनी गई है उसमें किए गए बदलावों के हिसाब से आपको अपडेट करना चाहिए. पक्का करें कि आप बदलावों की पुष्टि और जांच करते समय, होस्ट साइट में ही बदलाव कर रहे हैं.

ऐप्लिकेशन डिज़ाइन

जैसा कि बताया गया है, कोडलैब, कास्ट सेशन शुरू करने के लिए भेजने वाले के ऐप्लिकेशन का इस्तेमाल करता है. साथ ही, कॉन्टेंट पाने वाले एक ऐसे ऐप्लिकेशन का इस्तेमाल करता है जिसमें विज्ञापन के लिए ब्रेक एपीआई का इस्तेमाल करने के लिए बदलाव किया जाएगा.

इस कोडलैब में, कास्ट और कमांड टूल, रिसीवर ऐप्लिकेशन को लॉन्च करने के लिए, वेब सेंडर के तौर पर काम करेगा. शुरू करने के लिए, टूल को Chrome ब्राउज़र में खोलें. Cast SDK Developer Console पर आपको दिया गया पाने वाला ऐप्लिकेशन आईडी डालें और भेजने वाले ऐप्लिकेशन को जांच के लिए कॉन्फ़िगर करने के लिए सेट करें पर क्लिक करें.

ध्यान दें: अगर आपको पता चलता है कि 'कास्ट करें' आइकॉन नहीं दिख रहा है, तो पक्का करें कि वेब रिसीवर और कास्ट डिवाइस को Cast Developer Console में ठीक से रजिस्टर किया गया हो. अगर आपने अब तक ऐसा नहीं किया है, तो रजिस्टर किए गए किसी भी कास्ट डिवाइस को बंद करके फिर से चालू करें.

कोडलैब पाने वाला ऐप्लिकेशन इस कोडलैब का मुख्य मकसद होता है. इसमें index.html में बताया गया एक मुख्य व्यू और js/receiver.js नाम की एक JavaScript फ़ाइल शामिल होती है. इनके बारे में नीचे बताया गया है.

index.html

इस एचटीएमएल फ़ाइल में हमारे रिसीवर ऐप्लिकेशन का यूज़र इंटरफ़ेस (यूआई) है, जो cast-media-player एलिमेंट से मिला है. यह सीएएफ़ SDK टूल और Cast डीबग लॉगर लाइब्रेरी को भी लोड करता है.

receiver.js

यह स्क्रिप्ट हमारे रिसीवर ऐप्लिकेशन के लिए सभी लॉजिक मैनेज करती है. फ़िलहाल, इसमें एक बेसिक सीएएफ़ रिसीवर मौजूद है, जो कास्ट कॉन्टेक्स्ट शुरू करने के साथ-साथ शुरू करने पर वीडियो ऐसेट को लोड करता है. Cast और Command टूल में लॉग इन करने की सुविधा देने के लिए, डीबग करने की कुछ सुविधाएं भी जोड़ी गई हैं.

6. अपने कॉन्टेंट में वीएमएपी जोड़ना

Cast वेब रिसीवर SDK टूल, डिजिटल वीडियो की एक से ज़्यादा विज्ञापन प्लेलिस्ट के ज़रिए दिखाए जाने वाले विज्ञापनों के लिए सहायता उपलब्ध कराता है. इसे वीएमएपी भी कहा जाता है. एक्सएमएल स्ट्रक्चर, मीडिया के विज्ञापन के लिए ब्रेक और उससे जुड़े ब्रेक की क्लिप का मेटाडेटा तय करता है. इन विज्ञापनों को शामिल करने के लिए SDK टूल, MediaInformation ऑब्जेक्ट में vmapAdsRequest प्रॉपर्टी उपलब्ध कराता है.

js/receiver.js फ़ाइल में, VastAdsRequest ऑब्जेक्ट बनाएं. लोड करने के अनुरोध इंटरसेप्टर फ़ंक्शन को ढूंढें और इसे नीचे दिए गए कोड से बदलें. इसमें DoubleClick से मिले VMAP टैग यूआरएल का नमूना शामिल होता है और यह एक रैंडम correlator वैल्यू देता है, ताकि यह पक्का किया जा सके कि उसी यूआरएल पर बाद में होने वाले अनुरोध, विज्ञापन के लिए ब्रेक के साथ एक्सएमएल टेंप्लेट जनरेट करते हैं, जिसे अब तक नहीं देखा गया है.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');

      // Create the VMAP Ads request data and append it to the MediaInformation.
      const vmapUrl =
          'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
          Math.floor(Math.random() * Math.pow(10, 10));
      let vmapRequest = new cast.framework.messages.VastAdsRequest();
      vmapRequest.adTagUrl = vmapUrl;
      loadRequestData.media.vmapAdsRequest = vmapRequest;

      castDebugLogger.warn(
          'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);

      return loadRequestData;
    });

js/receiver.js पर अपने बदलाव सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट करें आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. VMAP विज्ञापनों के बाद मुख्य कॉन्टेंट दिखाया जाना चाहिए.

7. अपने कॉन्टेंट में वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) जोड़ना

जैसा कि पहले बताया गया है, वेब पाने वाले के SDK टूल में कई तरह के विज्ञापन काम करते हैं. इस सेक्शन में, डिजिटल वीडियो विज्ञापन दिखाने के लिए टेंप्लेट वाले विज्ञापनों को इंटिग्रेट करने के लिए उपलब्ध एपीआई को हाइलाइट किया गया है. इन्हें वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) भी कहा जाता है. अगर आपने पिछले सेक्शन से VMAP कोड लागू किया है, तो उसे टिप्पणी करें.

लोड रिक्वेस्ट इंटरसेप्टर के बाद, इन्हें अपनी js/receiver.js फ़ाइल में कॉपी करें. इसमें DoubleClick की छह वीएएसटी ब्रेक क्लिप और एक रैंडम correlator वैल्यू शामिल है. ब्रेक की इन क्लिप को पांच ब्रेक के लिए असाइन किया गया है. मुख्य कॉन्टेंट के हिसाब से, हर ब्रेक के position को सेकंड के हिसाब से सेट किया गया है. इसमें प्री-रोल (position को 0 पर सेट किया गया है) और पोस्ट-रोल (position को -1 पर सेट किया गया है) ब्रेक शामिल हैं.

const addVASTBreaksToMedia = (mediaInformation) => {
  mediaInformation.breakClips = [
    {
      id: 'bc1',
      title: 'bc1 (Pre-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('preroll')
      }
    },
    {
      id: 'bc2',
      title: 'bc2 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc3',
      title: 'bc3 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc4',
      title: 'bc4 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc5',
      title: 'bc5 (Mid-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('midroll')
      }
    },
    {
      id: 'bc6',
      title: 'bc6 (Post-roll)',
      vastAdsRequest: {
        adTagUrl: generateVastUrl('postroll')
      }
    }
  ];

  mediaInformation.breaks = [
    {id: 'b1', breakClipIds: ['bc1'], position: 0},
    {id: 'b2', breakClipIds: ['bc2'], position: 15},
    {id: 'b3', breakClipIds: ['bc3', 'bc4'], position: 60},
    {id: 'b4', breakClipIds: ['bc5'], position: 100},
    {id: 'b5', breakClipIds: ['bc6'], position: -1}
  ];
};

ध्यान दें: ब्रेक की breakClipIds प्रॉपर्टी एक कलेक्शन है. इसका मतलब है कि हर ब्रेक के लिए, ब्रेक की कई क्लिप असाइन की जा सकती हैं.

अपने js/receiver.js file में, लोड करें मैसेज इंटरसेप्टर का पता लगाएं और उसे नीचे दिए गए कोड से बदलें. ध्यान दें कि VMAP काम के बारे में जानकारी दी गई है, ताकि वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) टाइप के विज्ञापन दिखाए जा सकें.

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, (loadRequestData) => {
      castDebugLogger.info('MyAPP.LOG', 'Intercepting LOAD request');

      // Create the VMAP Ads request data and append it to the MediaInformation.
      // const vmapUrl =
      //     'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=' +
      //     Math.floor(Math.random() * Math.pow(10, 10));
      // let vmapRequest = new cast.framework.messages.VastAdsRequest();
      // vmapRequest.adTagUrl = vmapUrl;
      // loadRequestData.media.vmapAdsRequest = vmapRequest;

      // Append VAST ad breaks to the MediaInformation.
      addVASTBreaksToMedia(loadRequestData.media);

      castDebugLogger.warn(
          'MyAPP.LOG', 'Playable URL: ' + loadRequestData.media.contentId);

      return loadRequestData;
    });

js/receiver.js पर अपने बदलाव सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट करें आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) विज्ञापन, मुख्य कॉन्टेंट के बाद चलने चाहिए.

8. विज्ञापन के लिए ब्रेक लेना

सीएएफ़ की BreakManager क्लास होती है. यह विज्ञापन व्यवहार के लिए, कारोबार के कस्टम नियमों को लागू करने में आपकी मदद करती है. इनमें से कोई एक सुविधा ऐप्लिकेशन को कुछ स्थितियों के आधार पर प्रोग्राम के हिसाब से ब्रेक छोड़ने और क्लिप ब्रेक करने की अनुमति देती है. इस उदाहरण में ऐसे विज्ञापन के लिए ब्रेक को स्किप करने का तरीका बताया गया है जिसकी पोज़िशन कॉन्टेंट के पहले 30 सेकंड के बीच में है, लेकिन पोस्ट-रोल ब्रेक नहीं. पिछले सेक्शन में कॉन्फ़िगर किए गए VAST विज्ञापनों का इस्तेमाल करते समय, पांच ब्रेक तय किए गए हैं: 1 प्री-रोल ब्रेक, मिड-रोल ब्रेक (15, 60 और 100 सेकंड पर), और आखिर में, पोस्ट-रोल ब्रेक. चरणों को पूरा करने के बाद, सिर्फ़ वीडियो शुरू होने से पहले विज्ञापन और वीडियो के बीच में दिखने वाले ऐसे विज्ञापन स्किप किए जाएंगे जिनकी पोज़िशन 15 सेकंड है.

ऐसा करने के लिए, ऐप्लिकेशन को BreakManager के ज़रिए उपलब्ध एपीआई को कॉल करना चाहिए, ताकि ब्रेक लोड करने के लिए इंटरसेप्टर सेट किया जा सके. नीचे दी गई लाइन को अपनी js/receiver.js फ़ाइल में, context और playerManager वैरिएबल वाली लाइनों के बाद कॉपी करें, ताकि किसी इंस्टेंस का रेफ़रंस मिल सके.

const breakManager = playerManager.getBreakManager();

ऐप्लिकेशन को, पोस्ट-रोल ब्रेक के दौरान, 30 सेकंड से पहले दिखने वाले विज्ञापन ब्रेक को अनदेखा करने के लिए, इंटरसेप्टर को एक नियम के साथ सेट अप करना चाहिए. इसकी वजह यह है कि विज्ञापन की position वैल्यू -1 हैं. यह इंटरसेप्टर PlayerManager पर लोड करें इंटरसेप्टर की तरह काम करता है, लेकिन यह खास तौर पर ब्रेक क्लिप लोड करने के लिए होता है. इसे लोड करने के अनुरोध इंटरसेप्टर के बाद और addVASTBreaksToMedia फ़ंक्शन के एलान से पहले सेट करें.

इन्हें js/receiver.js फ़ाइल में कॉपी करें.

breakManager.setBreakClipLoadInterceptor((breakClip, breakContext) => {
  /**
   * The code will skip playback of break clips if the break position is within
   * the first 30 seconds.
   */
  let breakObj = breakContext.break;
  if (breakObj.position >= 0 && breakObj.position < 30) {
    castDebugLogger.debug(
        'MyAPP.LOG',
        'Break Clip Load Interceptor skipping break with ID: ' + breakObj.id);
    return null;
  } else {
    return breakClip;
  }
});

ध्यान दें: null पर वापस जाने पर, BreakClip की प्रोसेस स्किप हो जाएगी. अगर Break में कोई ब्रेक क्लिप तय नहीं की गई है, तो ब्रेक को छोड़ दिया जाता है.

js/receiver.js पर अपने बदलाव सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट करें आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) विज्ञापन प्रोसेस किए जाने चाहिए. ध्यान दें कि वीडियो शुरू होने से पहले विज्ञापन और पहले वीडियो के बीच में दिखने वाले विज्ञापन (जिनके position 15 सेकंड के होते हैं) विज्ञापन नहीं चलाए जाते हैं.

9. ब्रेक लेने के तरीके को पसंद के मुताबिक बनाएं

पिछले ब्रेक को देखने पर, डिफ़ॉल्ट रूप से लागू करने पर उन सभी Break आइटम का पता चलता है जिनकी पोज़िशन, सीक ऑपरेशन की seekFrom और seekTo वैल्यू के बीच है. ब्रेक की इस सूची से, SDK टूल उस Break को चलाता है जिसकी position, seekTo वैल्यू के सबसे करीब है और जिसकी isWatched प्रॉपर्टी false पर सेट है. इसके बाद, उस ब्रेक की isWatched प्रॉपर्टी true पर सेट हो जाती है. साथ ही, प्लेयर ब्रेक की क्लिप चलाना शुरू करता है. ब्रेक देखे जाने के बाद, मुख्य कॉन्टेंट seekTo की पोज़िशन से फिर से चलाना शुरू कर देता है. अगर ऐसा कोई ब्रेक मौजूद नहीं है, तो कोई ब्रेक नहीं चलता और मुख्य कॉन्टेंट seekTo की पोज़िशन से फिर से शुरू हो जाता है.

यह तय करने के लिए कि वीडियो में कौन से ब्रेक चलाए जाएं, Cast SDK टूल BreakManager में setBreakSeekInterceptor एपीआई उपलब्ध कराता है. जब कोई ऐप्लिकेशन उस एपीआई के ज़रिए अपना कस्टम लॉजिक देता है, तो SDK टूल उसे कॉल करता है. ऐसा तब होता है, जब एक या उससे ज़्यादा ब्रेक में आगे का कोई कार्रवाई की जाती है. कॉलबैक फ़ंक्शन एक ऑब्जेक्ट पास करता है जिसमें seekFrom पोज़िशन और seekTo पोज़िशन के बीच सभी ब्रेक होते हैं. इसके बाद, ऐप्लिकेशन को BreakSeekData में बदलाव करना होगा और उसे लौटाना होगा.

इसका इस्तेमाल दिखाने के लिए, नीचे दिया गया सैंपल, डिफ़ॉल्ट व्यवहार को बदल देता है. इसके लिए, यह देखा गया है कि किस तरह के ब्रेक का इस्तेमाल किया जा चुका है और टाइमलाइन में कौनसा ब्रेक सबसे पहले दिखाया गया है.

setBreakClipLoadInterceptor की परिभाषा के तहत, इन्हें अपनी js/receiver.js फ़ाइल में कॉपी करें.

breakManager.setBreakSeekInterceptor((breakSeekData) => {
  /**
   * The code will play an unwatched break between the seekFrom and seekTo
   * position. Note: If the position of a break is less than 30 then it will be
   * skipped due to the setBreakClipLoadInterceptor code.
   */
  castDebugLogger.debug(
      'MyAPP.LOG',
      'Break Seek Interceptor processing break ids ' +
          JSON.stringify(breakSeekData.breaks.map(adBreak => adBreak.id)));

  // Remove all other breaks except for the first one.
  breakSeekData.breaks.splice(1,breakSeekData.breaks.length);
  return breakSeekData;
});

ध्यान दें: अगर फ़ंक्शन कोई वैल्यू नहीं दिखाता है या null दिखाता है, तो कोई ब्रेक नहीं चलाया जाता.

js/receiver.js पर अपने बदलाव सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट करें आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) विज्ञापन प्रोसेस किए जाने चाहिए. ध्यान दें कि वीडियो शुरू होने से पहले विज्ञापन और पहले वीडियो के बीच में दिखने वाले विज्ञापन (जिनके position 15 सेकंड के होते हैं) विज्ञापन नहीं चलाए जाते हैं.

ब्रेक क्लिप लोड इंटरसेप्टर से छोड़े गए सभी ब्रेक को खत्म करने के लिए, वीडियो चलने के 30 सेकंड का इंतज़ार करें. पहुंचने के बाद, मीडिया कंट्रोल टैब पर जाकर, आगे-पीछे करने का निर्देश भेजें. मीडिया में खोजें इनपुट को 300 सेकंड में भरें और पाने वाला बटन पर क्लिक करें. 'ब्रेक सीक इंटरसेप्टर' में प्रिंट किए गए लॉग को नोट करें. seekFrom समय के करीब ब्रेक चलाने के लिए डिफ़ॉल्ट व्यवहार को बदल देना चाहिए.

10. बधाई हो

अब आपको सबसे नए Cast रिसीवर SDK टूल का इस्तेमाल करके, अपने रिसीवर ऐप्लिकेशन में विज्ञापन जोड़ने का तरीका पता है.

ज़्यादा जानकारी के लिए, डेवलपर की विज्ञापन के लिए ब्रेक की गाइड देखें.