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

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

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

Google Cast क्या है?

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

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

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

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

इस कोडलैब को पूरा करने के बाद, आपके पास एक ऐसा Cast Receiver होगा जो Break API का फ़ायदा लेता है.

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

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

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

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

अनुभव

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

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

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

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

file_downloadसोर्स कोड डाउनलोड करना

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

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

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

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

सर्वर चलाना

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

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

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

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

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

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

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

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

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

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

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

5. स्टार्ट प्रोजेक्ट तैयार करना

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

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

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

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

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

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

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

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

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

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

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

index.html

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

receiver.js

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

6. अपने वीडियो में VMAP जोड़ना

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

js/receiver.js फ़ाइल में, VastAdsRequest ऑब्जेक्ट बनाएं. LOAD request interceptor फ़ंक्शन ढूंढें और उसे यहां दिए गए कोड से बदलें. इसमें DoubleClick का सैंपल 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;

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

      return loadRequestData;
    });

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

7. अपने वीडियो में VAST जोड़ना

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

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

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

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

const breakManager = playerManager.getBreakManager();

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

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