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

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

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

Google Cast क्या है?

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

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

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

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

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

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

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

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

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

अनुभव

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

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

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

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

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

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

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

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

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

सर्वर चलाना

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

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

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

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

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

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

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

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

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

अपने 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 पर आपको जो Receiver ऐप्लिकेशन आईडी दिया गया है उसे डालें. इसके बाद, जांच के लिए सेंडर ऐप्लिकेशन को कॉन्फ़िगर करने के लिए, सेट करें पर क्लिक करें.

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

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

index.html

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

receiver.js

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

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

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

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

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 जोड़ना

जैसा कि पहले बताया गया है, Web Receiver 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 में, लोड मैसेज इंटरसेप्टर ढूंढें और उसे इस कोड से बदलें. ध्यान दें कि वीएएसटी टाइप के विज्ञापन दिखाने के लिए, वीएमएपी के काम को टिप्पणी के तौर पर दिखाया गया है.

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 विज्ञापनों का इस्तेमाल करते समय, पांच ब्रेक तय किए गए हैं: एक प्री-रोल ब्रेक, तीन मिड-रोल ब्रेक (15, 60, और 100 सेकंड पर), और आखिर में एक पोस्ट-रोल ब्रेक. इन चरणों को पूरा करने के बाद, सिर्फ़ उन प्री-रोल और मिड-रोल विज्ञापनों को स्किप किया जाता है जो 15 सेकंड पर दिखाए जाते हैं.

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

const breakManager = playerManager.getBreakManager();

ऐप्लिकेशन को एक इंटरसेप्टर सेट अप करना चाहिए. इसमें एक ऐसा नियम होना चाहिए जो 30 सेकंड से पहले आने वाले किसी भी विज्ञापन ब्रेक को अनदेखा करे. साथ ही, इसमें पोस्ट-रोल ब्रेक को ध्यान में रखा जाना चाहिए, क्योंकि इनकी position वैल्यू -1 होती है. यह इंटरसेप्टर, PlayerManager पर मौजूद LOAD इंटरसेप्टर की तरह काम करता है. हालांकि, यह ब्रेक क्लिप लोड करने के लिए खास तौर पर बनाया गया है. इसे LOAD अनुरोध इंटरसेप्टर के बाद और 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 वैल्यू के बीच होती है. ब्रेक की इस सूची में से, एसडीके उस Break को चलाता है जिसका position, seekTo वैल्यू के सबसे करीब है. साथ ही, जिसकी isWatched प्रॉपर्टी false पर सेट है. इसके बाद, उस ब्रेक की isWatched प्रॉपर्टी को true पर सेट कर दिया जाता है. साथ ही, प्लेयर ब्रेक क्लिप चलाना शुरू कर देता है. विज्ञापन देखने के बाद, मुख्य कॉन्टेंट seekTo से फिर से चलना शुरू हो जाता है. अगर ऐसा कोई ब्रेक मौजूद नहीं है, तो कोई ब्रेक नहीं चलाया जाता है. साथ ही, मुख्य कॉन्टेंट seekTo पोज़िशन से फिर से चलना शुरू हो जाता है.

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

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

यहां दिए गए कोड को अपनी js/receiver.js फ़ाइल में, setBreakClipLoadInterceptor की डेफ़िनिशन में जाकर चिपकाएं.

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 सेकंड डालें. इसके बाद, TO बटन पर क्लिक करें. ब्रेक सीक इंटरसेप्टर में प्रिंट किए गए लॉग नोट करें. अब डिफ़ॉल्ट सेटिंग को बदलकर, ब्रेक को seekFrom के करीब चलाया जाना चाहिए.

10. बधाई हो

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

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