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

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

Google Cast का लोगो

यह कोडलैब, Cast Ad ब्रेक्स एपीआई का इस्तेमाल करने वाला कस्टम वेब रिसीवर ऐप्लिकेशन बनाने के तरीके के बारे में बताता है.

Google Cast क्या है?

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

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

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

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

इस कोडलैब को पूरा करने के बाद, आपके पास कास्ट पाने वाला ऐसा डिवाइस होगा जिसे ब्रेक एपीआई का फ़ायदा मिलेगा.

आप इन चीज़ों के बारे में जानेंगे

  • कास्ट करने के लिए, कॉन्टेंट में VMAP और VAST (वीडियो विज्ञापन देने के लिए टेम्प्लेट) ब्रेक शामिल करने का तरीका
  • ब्रेक क्लिप कैसे छोड़ें
  • वीडियो में आगे/पीछे जाने के लिए, डिफ़ॉल्ट ब्रेक के व्यवहार को पसंद के मुताबिक बनाने का तरीका

आपको इनकी ज़रूरत होगी

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

अनुभव

इस कोडलैब के ज़रिए आगे बढ़ने से पहले, पक्का करें कि आपके पास नीचे दिया गया अनुभव हो.

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

आपको इस ट्यूटोरियल का इस्तेमाल कैसे करना है?

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

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

नई इंटरमीडिएट कुशल

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

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

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

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

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

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

सर्वर चलाएं

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

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

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

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

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

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

'नए ऐप्लिकेशन पाने वाले का ऐप्लिकेशन' स्क्रीन की इमेज, जिसमें 'पसंद के मुताबिक पाने वाला' विकल्प हाइलाइट किया गया है

"कस्टम रिसीवर" चुनें. हम इसे बना रहे हैं.

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

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

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

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

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

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

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

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

5. प्रोजेक्ट शुरू करने की तैयारी करना

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

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

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

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

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

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

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

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

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

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

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

index.html

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

receiver.js

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

6. अपने कॉन्टेंट में VMAP जोड़ें

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

js/receiver.js फ़ाइल में, कोई VastAdsRequest ऑब्जेक्ट बनाएं. LOAD अनुरोध इंटरसेप्टर फ़ंक्शन का पता लगाएं और इसे नीचे दिए गए कोड से बदलें. इसमें 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. अपने कॉन्टेंट में VAST (वीडियो विज्ञापन देने के लिए टेम्प्लेट) जोड़ें

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

इंटरसेप्टर लोड करने के अनुरोध के बाद, यहां दी गई जानकारी को अपनी js/receiver.js फ़ाइल में कॉपी करें. इसमें DoubleClick की छह VAST ब्रेक क्लिप और एक रैंडम correlator वैल्यू है. ये ब्रेक क्लिप 5 ब्रेक के लिए असाइन की जाती हैं. हर ब्रेक के लिए, 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 में, 'लोड करें' मैसेज इंटरसेप्टर का पता लगाएं और उसे इस कोड से बदलें. ध्यान दें कि VAST (वीडियो विज्ञापन देने के लिए टेम्प्लेट) टाइप के विज्ञापन दिखाने के लिए, 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 में सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. VAST (वीडियो विज्ञापन देने के लिए टेम्प्लेट) विज्ञापन चलने चाहिए और उसके बाद मुख्य कॉन्टेंट दिखना चाहिए.

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

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

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

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 में सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. VAST विज्ञापनों को प्रोसेस किया जाना चाहिए. ध्यान दें कि वीडियो शुरू होने से पहले विज्ञापन और पहले वीडियो के बीच में दिखने वाले विज्ञापन (जिनका 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 में सेव करें और फ़ाइल को अपने वेब सर्वर पर अपलोड करें. कास्ट आइकॉन पर क्लिक करके, कास्ट और कमांड टूल पर कास्ट सेशन शुरू करें. VAST विज्ञापनों को प्रोसेस किया जाना चाहिए. ध्यान दें कि वीडियो शुरू होने से पहले विज्ञापन और पहले वीडियो के बीच में दिखने वाले विज्ञापन (जिनका position 15 सेकंड का है) वाले विज्ञापन नहीं चलाए जाते हैं.

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

10. बधाई हो

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

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