HbbTV-তে IMA SDK দিয়ে শুরু করুন

IMA DAI SDK একটি ন্যূনতম HbbTV ভিডিও প্লেয়ার অ্যাপে ইন্টিগ্রেশন সমর্থন করে। IMA DAI SDK একটি ব্রডকাস্ট কন্টেন্ট স্ট্রিমের সাথে একটি ব্রডব্যান্ড অ্যাড স্ট্রিমের জন্য গুগল অ্যাড ম্যানেজার ডিমান্ড চালু করতে সক্ষম করে। এই নির্দেশিকাটি ব্রডকাস্ট স্ট্রিম থেকে অ্যাড ইভেন্ট ডেটার উপর ভিত্তি করে একটি অ্যাড ম্যানিফেস্ট লোড করার পদ্ধতি বর্ণনা করে।

একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন দেখতে বা অনুসরণ করতে, IMA HTML5 DAI SDK সহ HbbTV লিনিয়ার স্যাম্পল অ্যাপটি ডাউনলোড করুন। পুরোনো টিভি ডিভাইসগুলোকে সমর্থন করার জন্য, এই নির্দেশিকা এবং গিটহাব স্যাম্পল অ্যাপটি ES5 জাভাস্ক্রিপ্টে লেখা হয়েছে।

HbbTV ছাড়া অন্যান্য প্ল্যাটফর্মের সাথে ইন্টিগ্রেশন সংক্রান্ত তথ্যের জন্য, ইন্টারেক্টিভ মিডিয়া অ্যাডস এসডিকে (Interactive Media Ads SDKs) দেখুন।

পূর্বশর্ত

এই নির্দেশিকাটি অনুসরণ করার আগে, নিশ্চিত করুন যে আপনার কাছে নিম্নলিখিত জিনিসগুলি আছে:

  • IMA DAI ব্যবহার করার জন্য, আপনার একটি Ad Manager 360 Advanced অ্যাকাউন্ট থাকতে হবে। যদি আপনার একটি Ad Manager অ্যাকাউন্ট থাকে, তবে আরও বিস্তারিত জানতে আপনার অ্যাকাউন্ট ম্যানেজারের সাথে যোগাযোগ করুন। Ad Manager-এর জন্য সাইন আপ করার বিষয়ে তথ্যের জন্য, Ad Manager হেল্প সেন্টার দেখুন।
  • মিডিয়া প্লেব্যাকের জন্য ব্রডকাস্ট অবজেক্টের সাথে মিথস্ক্রিয়াকারী একটি HbbTV অ্যাপ। আরও বিস্তারিত জানতে, HbbTV ব্রডকাস্ট এভি অবজেক্ট দেখুন।
  • dash.js-এর এমন একটি সংস্করণ যা প্রিলোডিং সমর্থন করে। আমরা সংস্করণ ৪.৬.০ বা তার পরবর্তী সংস্করণ ব্যবহারের পরামর্শ দিই।
  • অ্যাপ্লিকেশনটি হোস্ট করার জন্য একটি ওয়েব সার্ভার।
  • DVB ব্রডকাস্ট স্ট্রিম সহ একটি টেস্টিং এনভায়রনমেন্ট। আপনার টেস্টিং এনভায়রনমেন্ট সেট আপ করার বিস্তারিত নির্দেশাবলীর জন্য, “Running an HbbTV application” দেখুন।
    • ব্রডকাস্ট স্ট্রিম : কাস্টম অ্যাপ্লিকেশন ইনফরমেশন টেবিল (AIT) ডেটা সম্বলিত একটি ব্রডকাস্ট স্ট্রিম প্রস্তুত করুন। টিভির গ্রহণের জন্য ব্রডকাস্ট স্ট্রিমটি প্রেরণ করার একটি উপায়ও আপনার প্রয়োজন। ব্রডকাস্ট স্ট্রিমটি প্রেরণ করতে আপনি একটি DVB মডুলেটর বা অন্য কোনো পদ্ধতি ব্যবহার করতে পারেন।
    • ওয়েব সার্ভার : টিভি থেকে অ্যাক্সেসযোগ্য একটি ওয়েব সার্ভারে HbbTV অ্যাপ্লিকেশনটি হোস্ট করুন।
  • পড সার্ভিং ম্যানিফেস্ট টাইপের একটি লাইভস্ট্রিম ইভেন্ট। ইভেন্টটি তৈরি করতে, DAI-এর জন্য একটি লাইভস্ট্রিম সেট আপ করুন দেখুন।

একটি সামঞ্জস্যপূর্ণ সম্প্রচার স্ট্রিম তৈরি করুন

আপনার HbbTV অ্যাপ আপনার ব্রডকাস্ট স্ট্রিমে HbbTV স্ট্রিম ইভেন্ট শোনার জন্য broadcastContainer.addStreamEventListener() ব্যবহার করে। বিজ্ঞাপন সঠিকভাবে লোড এবং প্লে করার জন্য, আপনাকে অবশ্যই সংশ্লিষ্ট JSON স্ট্রিং পেলোড অন্তর্ভুক্ত করতে নিম্নলিখিত ইভেন্ট টাইপগুলির সাথে আপনার ব্রডকাস্ট স্ট্রিম সেট আপ করতে হবে:

  • AD_BREAK_EVENT_ANNOUNCE - {"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}
  • AD_BREAK_EVENT_START - {"type":"adBreakStart"}
  • AD_BREAK_EVENT_END - {"type":"adBreakEnd"}

এই ইভেন্টগুলির জন্য, streamEvent.type সহ একটি JSON স্ট্রিং পেলোড অন্তর্ভুক্ত করুন। বিজ্ঞাপন প্রি-লোডিং সমর্থন করার জন্য, AD_BREAK_EVENT_ANNOUNCE ইভেন্টে অবশ্যই streamEvent.duration এবং streamEvent.offset অন্তর্ভুক্ত থাকতে হবে। আরও তথ্যের জন্য, Listen to HbbTV stream events দেখুন। আপনার ব্রডকাস্ট স্ট্রিম সেট আপ করতে, উদাহরণ মাল্টিপ্লেক্সড MPEG ট্রান্সপোর্ট স্ট্রিমটি দেখুন। উদাহরণ স্ট্রিমটি ব্যবহার করার জন্য, আপনাকে অবশ্যই আপনার নিজের স্ট্রিম সেটআপের জন্য অ্যাপ্লিকেশন ইনফরমেশন টেবিলের URL আপডেট করতে হবে।

লাইভস্ট্রিম ইভেন্ট পরিবেশনের জন্য একটি পড তৈরি করুন

আপনার HbbTV অ্যাপে বিজ্ঞাপন দেখানোর জন্য, আপনার একটি পড প্রয়োজন যা লাইভস্ট্রিম ইভেন্ট পরিবেশন করে। ইভেন্টটি সেট আপ করার তথ্যের জন্য, DAI-এর জন্য একটি লাইভস্ট্রিম সেট আপ করুন দেখুন। আপনার সেট আপ করা স্ট্রিমটি অ্যাক্সেস করার জন্য, অ্যাপটিতে নিম্নলিখিত ভেরিয়েবলগুলো অবশ্যই থাকতে হবে:

  • NETWORK_CODE : বিজ্ঞাপন অনুরোধ করার জন্য অ্যাড ম্যানেজারের নেটওয়ার্ক কোড।
  • CUSTOM_ASSET_KEY : DAI-এর জন্য লাইভস্ট্রিম সেট আপ করার প্রক্রিয়ার সময় তৈরি হওয়া অ্যাড ম্যানেজার কাস্টম অ্যাসেট কী।

অ্যাপ্লিকেশন ফাইল কাঠামো তৈরি করুন

এই নির্দেশিকাটি IMA HbbTV স্যাম্পল অ্যাপের অনুরূপ একটি ফাইল কাঠামো ব্যবহার করে। এই নির্দেশিকাটি অনুসরণ করতে, নিম্নলিখিত ফাইলগুলি তৈরি করুন:

  • index.html : আপনার অ্যাপের জন্য HTML সূচীপত্র।
  • Style.css : আপনার অ্যাপের জন্য CSS স্টাইলিং।
  • application.js : মূল JS এন্ট্রি পয়েন্ট। এটি প্লেস্টেট এবং বিজ্ঞাপন বিরতি পরিচালনা করে।
  • video_player.js : বিজ্ঞাপন প্রদর্শনের জন্য ব্যবহৃত dash.js প্লেয়ারটি পরিচালনা করে।
  • ads_manager.js : IMA সেটআপ, স্ট্রিম রিকোয়েস্ট এবং ইভেন্ট হ্যান্ডলিং পরিচালনা করে।

ads_manager.js IMA DAI SDK সেট আপ করে। নিম্নলিখিত উপাদানগুলি IMA DAI SDK বাস্তবায়ন করে:

  • PodStreamRequest : একটি অবজেক্ট যা গুগলের বিজ্ঞাপন সার্ভারগুলিতে একটি স্ট্রিম অনুরোধ নির্ধারণ করে।
  • StreamManager : একটি অবজেক্ট যা ডাইনামিক বিজ্ঞাপন সন্নিবেশ স্ট্রিম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিংও পরিচালনা করে এবং স্ট্রিম ও বিজ্ঞাপন ইভেন্টগুলো পাবলিশারের কাছে ফরোয়ার্ড করে।

আপনার টেস্টিং পরিবেশ সেট আপ করার বিস্তারিত নির্দেশাবলীর জন্য, HbbTV অ্যাপ্লিকেশন চালানোর এই গাইডটি দেখুন।

IMA DAI SDK এবং DASH.js লোড করুন।

সম্প্রচারিত বিজ্ঞাপন স্ট্রিম প্লেব্যাক শুরু করতে, আপনার অ্যাপে IMA DAI SDK এবং dash.js লোড করুন। index.html ফাইলে application.js ট্যাগের আগে, স্ক্রিপ্ট ট্যাগ ব্যবহার করে dash.js এবং IMA ফ্রেমওয়ার্কটি যুক্ত করুন। 

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
index.html

এরপরে, dash.js প্লেয়ারটি চালু ও নিয়ন্ত্রণ করার জন্য একটি ভিডিও প্লেয়ার র‍্যাপার ক্লাস তৈরি করুন।

পরবর্তী
প্লেয়ার ক্লাস সেট আপ করুন