একটি ওয়েব রিসিভারে অ্যাড ব্রেক এপিআই সমর্থন যোগ করুন, একটি ওয়েব রিসিভারে অ্যাড ব্রেক এপিআই সমর্থন যোগ করুন

1. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবটি কাস্ট অ্যাড ব্রেকস এপিআই ব্যবহার করে একটি কাস্টম ওয়েব রিসিভার অ্যাপ কীভাবে তৈরি করবেন তা বর্ণনা করে।

গুগল কাস্ট কী?

গুগল কাস্ট ব্যবহারকারীদের মোবাইল ডিভাইস থেকে টিভিতে কন্টেন্ট কাস্ট করার সুযোগ দেয়। এরপর ব্যবহারকারীরা টিভিতে মিডিয়া প্লেব্যাকের জন্য তাদের মোবাইল ডিভাইসটিকে রিমোট কন্ট্রোল হিসেবে ব্যবহার করতে পারবেন।

Google Cast SDK আপনাকে আপনার অ্যাপটি টিভি বা সাউন্ড সিস্টেম নিয়ন্ত্রণ করতে প্রসারিত করতে দেয়। Cast SDK আপনাকে Google Cast ডিজাইন চেকলিস্টের উপর ভিত্তি করে প্রয়োজনীয় UI উপাদান যোগ করতে দেয়।

সমস্ত সমর্থিত প্ল্যাটফর্ম জুড়ে ব্যবহারকারীর অভিজ্ঞতাকে স্বজ্ঞাত করে তুলতে কাস্ট বাস্তবায়নকে মানসম্মত করার জন্য গুগল কাস্ট ডিজাইন চেকলিস্ট সরবরাহ করা হয়েছে।

আমরা কী তৈরি করতে যাচ্ছি?

এই কোডল্যাবটি সম্পন্ন করার পর, আপনি একটি কাস্ট রিসিভার তৈরি করতে পারবেন যা ব্রেক API এর সুবিধা গ্রহণ করবে।

তুমি কি শিখবে

• কাস্টের জন্য কন্টেন্টে VMAP এবং VAST ব্রেক কীভাবে অন্তর্ভুক্ত করবেন
• ব্রেক ক্লিপগুলি কীভাবে এড়িয়ে যাবেন
• সিকে ডিফল্ট ব্রেক আচরণ কীভাবে কাস্টমাইজ করবেন

তোমার যা লাগবে

• সর্বশেষ গুগল ক্রোম ব্রাউজার।
• HTTPS হোস্টিং পরিষেবা যেমন Firebase Hosting অথবা ngrok ।
• ইন্টারনেট অ্যাক্সেস সহ কনফিগার করা Chromecast বা Android TV এর মতো একটি Google Cast ডিভাইস।
• HDMI ইনপুট সহ একটি টিভি বা মনিটর, অথবা একটি Google Home Hub

অভিজ্ঞতা

এই কোডল্যাবটি চালিয়ে যাওয়ার আগে নিশ্চিত করুন যে আপনার নিম্নলিখিত অভিজ্ঞতা আছে।

• ওয়েব ডেভেলপমেন্ট সম্পর্কে সাধারণ জ্ঞান।
• কাস্ট ওয়েব রিসিভার অ্যাপ্লিকেশন তৈরি করা।

> নেটওয়ার্কিং সমস্যা হচ্ছে? > যদি আপনি এমন কোনও স্থানে থাকেন যেখানে ওয়াই-ফাই নেটওয়ার্ক নির্ভরযোগ্য নয়, তাহলে Chromecast ডিভাইসটি ইথারনেট অ্যাডাপ্টার ব্যবহার করে তারের মাধ্যমে সংযুক্ত করা যেতে পারে

Chromecast অথবা Google TV সহ Chromecast এর জন্য।

আপনি এই টিউটোরিয়ালটি কীভাবে ব্যবহার করবেন?

শুধু পুরোটা পড়ুন এটি পড়ুন এবং অনুশীলনগুলি সম্পূর্ণ করুন।

ওয়েব অ্যাপ তৈরির ক্ষেত্রে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?

নবীন মধ্যবর্তী দক্ষ

2. নমুনা কোড পান

আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করুন...

সোর্স কোড ডাউনলোড করুন

এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করুন।

> cast-videos-cast codelab সংগ্রহস্থলে দুটি নমুনা প্রকল্প রয়েছে: > * অ্যাপ-স্টার্ট — এই কোডল্যাবে আপনি যে প্রারম্ভিক কোডটি তৈরি করবেন। * app-done — সমাপ্ত নমুনা ভিডিও অ্যাপের সম্পূর্ণ কোড।

৩. স্থানীয়ভাবে রিসিভার স্থাপন করুন

আপনার ওয়েব রিসিভারটি একটি কাস্ট ডিভাইসের সাথে ব্যবহার করতে সক্ষম হওয়ার জন্য, এটি এমন কোথাও হোস্ট করা প্রয়োজন যেখানে আপনার কাস্ট ডিভাইসটি এটিতে পৌঁছাতে পারে। যদি আপনার কাছে ইতিমধ্যেই এমন একটি সার্ভার থাকে যা https সমর্থন করে, তাহলে নিম্নলিখিত নির্দেশাবলী এড়িয়ে যান এবং URL টি নোট করুন , কারণ পরবর্তী বিভাগে আপনার এটির প্রয়োজন হবে।

যদি আপনার ব্যবহারের জন্য কোন সার্ভার উপলব্ধ না থাকে, তাহলে আপনি Firebase Hosting অথবা ngrok ব্যবহার করতে পারেন।

সার্ভার চালান

আপনার পছন্দের পরিষেবা সেট আপ হয়ে গেলে, app-start নেভিগেট করুন এবং আপনার সার্ভার শুরু করুন।

আপনার হোস্ট করা রিসিভারের URL টি নোট করে রাখুন। আপনি পরবর্তী বিভাগে এটি ব্যবহার করবেন।

৪. কাস্ট ডেভেলপার কনসোলে একটি অ্যাপ্লিকেশন নিবন্ধন করুন

> আপনার কি কোন Cast Developer অ্যাকাউন্ট নেই? > Google Cast SDK Developer Console- এ একটি অ্যাকাউন্টের জন্য সাইন আপ করুন এবং নিবন্ধন ফি প্রদান করুন।

Chromecast ডিভাইসে এই কোডল্যাবের অন্তর্নির্মিত একটি কাস্টম রিসিভার চালানোর জন্য আপনাকে অবশ্যই আপনার অ্যাপ্লিকেশনটি নিবন্ধন করতে হবে। আপনার অ্যাপ্লিকেশনটি নিবন্ধন করার পরে, একটি অ্যাপ্লিকেশন আইডি তৈরি হবে যা ওয়েব রিসিভার অ্যাপ্লিকেশন চালু করার জন্য প্রেরক অ্যাপ্লিকেশনটিকে কনফিগার করতে হবে।

"নতুন অ্যাপ্লিকেশন যোগ করুন" এ ক্লিক করুন

"কাস্টম রিসিভার" নির্বাচন করুন, এটিই আমরা তৈরি করছি।

আপনার নতুন রিসিভারের বিশদ বিবরণ লিখুন। আপনার ওয়েব রিসিভার অ্যাপ্লিকেশনটি কোথায় হোস্ট করার পরিকল্পনা করছেন তা নির্দেশ করে URL ব্যবহার করতে ভুলবেন না। অ্যাপ্লিকেশনটি নিবন্ধন করার পরে কনসোল দ্বারা তৈরি অ্যাপ্লিকেশন আইডিটি নোট করুন । প্রেরক অ্যাপ্লিকেশনটি পরবর্তী বিভাগে সেই শনাক্তকারী ব্যবহার করার জন্য কনফিগার করা হবে।

আপনার রিসিভার অ্যাপ্লিকেশনটি প্রকাশ করার আগে যাতে এটি অ্যাক্সেস করতে পারে তার জন্য আপনাকে একটি Google Cast ডিভাইসও নিবন্ধন করতে হবে। আপনার রিসিভার অ্যাপ্লিকেশনটি প্রকাশ করার পরে, এটি সমস্ত Google Cast ডিভাইসে উপলব্ধ হবে। এই কোডল্যাবের উদ্দেশ্যে, একটি অপ্রকাশিত রিসিভার অ্যাপ্লিকেশনের সাথে কাজ করার পরামর্শ দেওয়া হচ্ছে।

"নতুন ডিভাইস যোগ করুন" এ ক্লিক করুন

আপনার কাস্ট ডিভাইসের পিছনে মুদ্রিত সিরিয়াল নম্বরটি লিখুন এবং এটিকে একটি বর্ণনামূলক নাম দিন। Google Cast SDK ডেভেলপার কনসোল অ্যাক্সেস করার সময় Chrome এ আপনার স্ক্রিন কাস্ট করেও আপনি আপনার সিরিয়াল নম্বরটি খুঁজে পেতে পারেন।

আপনার রিসিভার এবং ডিভাইসটি পরীক্ষার জন্য প্রস্তুত হতে ৫-১৫ মিনিট সময় লাগে। ৫-১৫ মিনিট অপেক্ষা করার পর আপনাকে অবশ্যই আপনার কাস্ট ডিভাইসটি রিবুট করতে হবে।

৫. শুরুর প্রকল্পটি প্রস্তুত করুন

এই কোডল্যাবটি শুরু করার আগে, বিজ্ঞাপন ডেভেলপার নির্দেশিকাটি পর্যালোচনা করা সহায়ক হতে পারে যা বিজ্ঞাপন বিরতি API গুলির একটি সারসংক্ষেপ প্রদান করে।

আপনার ডাউনলোড করা স্টার্ট অ্যাপে Google Cast-এর জন্য সাপোর্ট যোগ করতে হবে। এই কোডল্যাবে ব্যবহৃত কিছু Google Cast পরিভাষা এখানে দেওয়া হল:

• একটি প্রেরক অ্যাপ একটি মোবাইল ডিভাইস বা ল্যাপটপে চলে,
• গুগল কাস্ট ডিভাইসে একটি রিসিভার অ্যাপ চলে।

এখন আপনি আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে স্টার্টার প্রজেক্টের উপরে তৈরি করতে প্রস্তুত:

1. নির্বাচন করুন আপনার নমুনা কোড ডাউনলোড থেকে app-start ডিরেক্টরি।
2. js/receiver.js এবং index.html খুলুন।

মনে রাখবেন, এই কোডল্যাবটি ব্যবহার করার সময়, আপনার নির্বাচিত ওয়েব হোস্টিং সমাধানটি পরিবর্তনগুলি সহ আপডেট করা উচিত। যাচাইকরণ এবং পরীক্ষা চালিয়ে যাওয়ার সময় নিশ্চিত করুন যে আপনি পরিবর্তনগুলি হোস্ট সাইটে পুশ করছেন।

অ্যাপ ডিজাইন

যেমনটি উল্লেখ করা হয়েছে, কোডল্যাব একটি কাস্ট সেশন শুরু করার জন্য একটি প্রেরক অ্যাপ্লিকেশন এবং একটি রিসিভার অ্যাপ্লিকেশন ব্যবহার করে যা বিজ্ঞাপন বিরতি API ব্যবহার করার জন্য পরিবর্তিত হবে।

এই কোডল্যাবে, কাস্ট অ্যান্ড কমান্ড টুল রিসিভার অ্যাপ চালু করার জন্য ওয়েব সেন্ডার হিসেবে কাজ করবে। শুরু করতে, একটি Chrome ব্রাউজারে টুলটি খুলুন। কাস্ট SDK ডেভেলপার কনসোলে আপনাকে দেওয়া রিসিভার অ্যাপ আইডিটি লিখুন এবং পরীক্ষার জন্য প্রেরক অ্যাপটি কনফিগার করতে সেট এ ক্লিক করুন।

দ্রষ্টব্য: যদি আপনি দেখেন যে কাস্ট আইকনটি দেখা যাচ্ছে না, তাহলে নিশ্চিত করুন যে ওয়েব রিসিভার এবং কাস্ট ডিভাইস(গুলি) Cast Developer Console-এ সঠিকভাবে নিবন্ধিত আছে। যদি আপনি ইতিমধ্যেই এটি না করে থাকেন, তাহলে সবেমাত্র নিবন্ধিত যেকোনো কাস্ট ডিভাইসকে পাওয়ার সাইকেল করুন।

এই কোডল্যাবের মূল লক্ষ্য হল রিসিভার অ্যাপ এবং এতে index.html এ সংজ্ঞায়িত একটি প্রধান ভিউ এবং js/receiver.js নামক একটি জাভাস্ক্রিপ্ট ফাইল রয়েছে। এগুলো নীচে আরও বর্ণনা করা হল।

index.html সম্পর্কে

এই html ফাইলটিতে cast-media-player উপাদান দ্বারা প্রদত্ত আমাদের রিসিভার অ্যাপের UI রয়েছে। এটি CAF SDK এবং Cast Debug Logger লাইব্রেরিগুলিও লোড করে।

রিসিভার.জেএস

এই স্ক্রিপ্টটি আমাদের রিসিভার অ্যাপের সমস্ত লজিক পরিচালনা করে। বর্তমানে এটিতে একটি বেসিক CAF রিসিভার রয়েছে যা কাস্ট কনটেক্সট শুরু করে এবং শুরু করার পরে একটি ভিডিও সম্পদ লোড করে। কাস্ট এবং কমান্ড টুলে লগিং ব্যাক প্রদানের জন্য কিছু ডিবাগ লগার ক্ষমতাও যোগ করা হয়েছে।

> কাস্ট ডকুমেন্টেশন? > আমাদের কাছে রিসিভার, iOS, Android এবং Chrome প্রেরকদের জন্য বিস্তৃত ডকুমেন্টেশন রয়েছে।

৬. আপনার কন্টেন্টে VMAP যোগ করুন

কাস্ট ওয়েব রিসিভার SDK ডিজিটাল ভিডিও মাল্টিপল অ্যাড প্লেলিস্ট , যা VMAP নামেও পরিচিত, এর মাধ্যমে নির্দিষ্ট বিজ্ঞাপনগুলির জন্য সমর্থন প্রদান করে। XML কাঠামো একটি মিডিয়ার বিজ্ঞাপন বিরতি এবং এর সাথে সম্পর্কিত ব্রেক ক্লিপ মেটাডেটা নির্দিষ্ট করে। এই বিজ্ঞাপনগুলি সন্নিবেশ করার জন্য, SDK MediaInformation অবজেক্টে vmapAdsRequest সম্পত্তি প্রদান করে।

js/receiver.js ফাইলে, একটি VastAdsRequest অবজেক্ট তৈরি করুন। LOAD অনুরোধ ইন্টারসেপ্টর ফাংশনটি সনাক্ত করুন এবং নীচের কোডটি দিয়ে এটি প্রতিস্থাপন করুন। এতে DoubleClick থেকে একটি নমুনা VMAP ট্যাগ URL রয়েছে এবং এটি একটি র্যান্ডম কোরিলেটর মান প্রদান করে যাতে একই URL-এ পরবর্তী অনুরোধগুলি এমন একটি XML টেমপ্লেট তৈরি করে যা এখনও দেখা হয়নি এমন বিজ্ঞাপন বিরতি সহ।

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 এ সংরক্ষণ করুন এবং ফাইলটি আপনার ওয়েব সার্ভারে আপলোড করুন। Cast আইকনে ক্লিক করে Cast and Command Tool এ একটি Cast সেশন শুরু করুন। VMAP বিজ্ঞাপনগুলি প্লে হওয়া উচিত, তারপরে মূল কন্টেন্ট প্রদর্শিত হবে।

৭. আপনার কন্টেন্টে VAST যোগ করুন

আগেই উল্লেখ করা হয়েছে, ওয়েব রিসিভার SDK-তে অনেক ধরণের বিজ্ঞাপনের জন্য সমর্থন রয়েছে। এই বিভাগটি ডিজিটাল ভিডিও বিজ্ঞাপন পরিবেশন টেমপ্লেট বিজ্ঞাপনগুলিকে একীভূত করার জন্য উপলব্ধ API গুলি তুলে ধরে, যা VAST নামেও পরিচিত। আপনি যদি পূর্ববর্তী বিভাগ থেকে VMAP কোডটি প্রয়োগ করে থাকেন, তাহলে মন্তব্য করুন।

লোড রিকোয়েস্ট ইন্টারসেপ্টরের পরে আপনার js/receiver.js ফাইলে নিম্নলিখিতটি অনুলিপি করুন। এতে DoubleClick থেকে ছয়টি VAST ব্রেক ক্লিপ এবং একটি র‍্যান্ডম কোরিলেটর মান রয়েছে। এই ব্রেক ক্লিপগুলিকে 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 , LOAD মেসেজ ইন্টারসেপ্টরটি সনাক্ত করুন এবং এটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন। মনে রাখবেন যে VMAP কাজটি VAST ধরণের বিজ্ঞাপন প্রদর্শনের জন্য মন্তব্য করা হয়েছে।

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 এ সংরক্ষণ করুন এবং ফাইলটি আপনার ওয়েব সার্ভারে আপলোড করুন। Cast আইকনে ক্লিক করে Cast and Command Tool এ একটি Cast সেশন শুরু করুন। VAST বিজ্ঞাপনগুলি প্লে হওয়া উচিত, তারপরে মূল কন্টেন্ট প্রদর্শিত হবে।

৮. বিজ্ঞাপন বিরতি এড়িয়ে যাওয়া

CAF-এর BreakManager নামে একটি ক্লাস আছে যা আপনাকে বিজ্ঞাপন আচরণের জন্য কাস্টম ব্যবসায়িক নিয়ম বাস্তবায়নে সহায়তা করে। এই বৈশিষ্ট্যগুলির মধ্যে একটি অ্যাপ্লিকেশনগুলিকে প্রোগ্রাম্যাটিকভাবে বিরতি এড়িয়ে যেতে এবং কিছু শর্তের উপর ভিত্তি করে ক্লিপগুলি ভাঙতে দেয়। এই উদাহরণটি দেখায় যে কীভাবে এমন একটি বিজ্ঞাপন বিরতি এড়িয়ে যেতে হয় যার অবস্থান কন্টেন্টের প্রথম 30 সেকেন্ডের মধ্যে থাকে, কিন্তু পোস্ট-রোল ব্রেকগুলি নয়। পূর্ববর্তী বিভাগে কনফিগার করা VAST বিজ্ঞাপনগুলি ব্যবহার করার সময়, 5টি বিরতি সংজ্ঞায়িত করা হয়: 1টি প্রি-রোল ব্রেক, 3টি মিড-রোল ব্রেক (15, 60 এবং 100 সেকেন্ডে), এবং অবশেষে, একটি পোস্ট-রোল ব্রেক। ধাপগুলি সম্পন্ন করার পরে, শুধুমাত্র প্রি-রোল এবং মিড-রোল যাদের অবস্থান 15 সেকেন্ডে থাকে সেগুলি এড়িয়ে যাওয়া হয়।

এটি করার জন্য, অ্যাপ্লিকেশনটিকে ব্রেক লোডিংয়ের জন্য একটি ইন্টারসেপ্টর সেট করার জন্য BreakManager এর মাধ্যমে উপলব্ধ API গুলিকে কল করতে হবে। ইনস্ট্যান্সের রেফারেন্স পেতে context এবং playerManager ভেরিয়েবল ধারণকারী লাইনগুলির পরে নিম্নলিখিত লাইনটি আপনার js/receiver.js ফাইলে কপি করুন।

const breakManager = playerManager.getBreakManager();

অ্যাপ্লিকেশনটিতে একটি ইন্টারসেপ্টর সেট আপ করা উচিত যাতে ৩০ সেকেন্ডের আগে যেকোনো বিজ্ঞাপন বিরতি উপেক্ষা করা যায় এবং যেকোনো পোস্ট-রোল ব্রেক (কারণ তাদের 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 কোনও break clip সংজ্ঞায়িত না থাকে, তাহলে break নিজেই বাদ দেওয়া হয়।

আপনার পরিবর্তনগুলি js/receiver.js এ সংরক্ষণ করুন এবং ফাইলটি আপনার ওয়েব সার্ভারে আপলোড করুন। Cast আইকনে ক্লিক করে Cast and Command Tool এ একটি Cast সেশন শুরু করুন। VAST বিজ্ঞাপনগুলি প্রক্রিয়া করা উচিত। মনে রাখবেন যে প্রি-রোল এবং প্রথম মিড-রোল (যার position 15 সেকেন্ড) বিজ্ঞাপনগুলি চালানো হয় না।

৯. ব্রেক সিক আচরণ কাস্টমাইজ করুন

অতীতের বিরতি অনুসন্ধান করার সময়, ডিফল্ট বাস্তবায়ন সমস্ত Break আইটেমগুলি গ্রহণ করে যার অবস্থান seek অপারেশনের seekFrom এবং seekTo মানের মধ্যে থাকে। এই বিরতির তালিকা থেকে, SDK সেই Break চালায় যার position seekTo মানের সবচেয়ে কাছাকাছি এবং যার isWatched সম্পত্তি false তে সেট করা আছে। সেই break এর isWatched সম্পত্তিটি তারপর true তে সেট করা হয় এবং প্লেয়ারটি তার break ক্লিপগুলি চালানো শুরু করে। একবার break দেখা হয়ে গেলে, মূল কন্টেন্ট seekTo অবস্থান থেকে প্লেব্যাক পুনরায় শুরু করে। যদি এই ধরনের কোনও বিরতি না থাকে, তাহলে কোনও বিরতি চালানো হয় না এবং মূল কন্টেন্ট seekTo অবস্থানে পুনরায় চালানো শুরু করে।

কোন ব্রেকগুলো seek-এ চলবে তা কাস্টমাইজ করার জন্য, Cast SDK BreakManager এ setBreakSeekInterceptor API প্রদান করে। যখন কোন অ্যাপ্লিকেশন সেই API-এর মাধ্যমে তার কাস্টম লজিক প্রদান করে, তখন এক বা একাধিক ব্রেকের উপর seek অপারেশন সঞ্চালিত হলে 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 এ সংরক্ষণ করুন এবং ফাইলটি আপনার ওয়েব সার্ভারে আপলোড করুন। Cast আইকনে ক্লিক করে Cast and Command Tool এ একটি Cast সেশন শুরু করুন। VAST বিজ্ঞাপনগুলি প্রক্রিয়া করা উচিত। মনে রাখবেন যে প্রি-রোল এবং প্রথম মিড-রোল (যার position 15 সেকেন্ড) বিজ্ঞাপনগুলি চালানো হয় না।

ব্রেক ক্লিপ লোড ইন্টারসেপ্টর দ্বারা এড়িয়ে যাওয়া সমস্ত বিরতি অতিক্রম করার জন্য প্লেব্যাক সময় 30 সেকেন্ডে পৌঁছানো পর্যন্ত অপেক্ষা করুন। একবার পৌঁছানোর পরে, মিডিয়া কন্ট্রোল ট্যাবে নেভিগেট করে একটি সিক কমান্ড প্রেরণ করুন। 300 সেকেন্ডের মধ্যে সিক ইনটু মিডিয়া ইনপুট পূরণ করুন এবং TO বোতামে ক্লিক করুন। ব্রেক সিক ইন্টারসেপ্টরে মুদ্রিত লগগুলি লক্ষ্য করুন। seekFrom সময়ের কাছাকাছি ব্রেকটি চালানোর জন্য এখন ডিফল্ট আচরণটি ওভাররাইড করা উচিত।

১০. অভিনন্দন

এখন আপনি জানেন কিভাবে সর্বশেষ Cast Receiver SDK ব্যবহার করে আপনার রিসিভার অ্যাপ্লিকেশনে বিজ্ঞাপন যোগ করবেন।

আরও বিস্তারিত জানার জন্য, অ্যাড ব্রেকস ডেভেলপারের নির্দেশিকা দেখুন।

> আরও কাস্ট চান? > অন্যান্য কাস্ট কোডল্যাব এবং GitHub-এ আমাদের নমুনা অ্যাপগুলি দেখুন।