DAI-এর জন্য IMA SDK সেট-আপ করা

প্ল্যাটফর্ম বেছে নিন: HTML5 Android iOS tvOS Cast Roku

IMA SDK আপনার ওয়েবসাইট ও অ্যাপে মাল্টিমিডিয়া বিজ্ঞাপন ইন্টিগ্রেট করা সহজ করে তোলে। IMA SDK যেকোনও VAST-এর সাথে মানানসই বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক ম্যানেজ করতে পারে। IMA DAI SDK-এর মাধ্যমে, অ্যাপগুলি বিজ্ঞাপন ও কন্টেন্ট ভিডিওর জন্য—VOD বা লাইভ কন্টেন্ট— স্ট্রিম অনুরোধ করে। তারপর SDK একটি সম্মিলিত ভিডিও স্ট্রিম ফেরত পাঠায়, যাতে আপনাকে অ্যাপের মধ্যে বিজ্ঞাপন ও কন্টেন্ট ভিডিওর মধ্যে সুইচ করার বিষয়টি ম্যানেজ করতে না হয়।

আপনি যে DAI সমাধান ব্যবহার করতে চান সেটি বেছে নিন

সম্পূর্ণ পরিষেবা পড পরিবেশন

পড পরিবেশনকারী DAI

এই নির্দেশিকা দেখায় যে কীভাবে লাইভ বা VOD কন্টেন্টের জন্য DAI Pod Serving স্ট্রিম চালাতে হয়। এর জন্য, প্লেব্যাকের জন্য hls.js নির্ভর ভিডিও প্লেয়ারের সাথে IMA DAI SDK for HTML5 ব্যবহার করা হয়। সম্পূর্ণ হওয়া নমুনা ইন্টিগ্রেশন দেখতে বা ফলো করতে, HLS.js ও Safari Playback দুটিই কাজ করে, HLS Pod Serving-এর উদাহরণ দেখুন। DASH.js সংক্রান্ত সহায়তার জন্য, DASH পড পরিবেশন সংক্রান্ত উদাহরণ দেখুন। আপনি HTML5 DAI GitHub রিলিজ পৃষ্ঠা থেকে এই নমুনা অ্যাপ ডাউনলোড করতে পারবেন।

মনে রাখবেন: HTML5-এর জন্য IMA DAI SDK, HLS ও DASH স্ট্রিম দু'টির সাথেই কাজ করে, তবে দু'টি চালানোর জন্যই আলাদা মিডিয়া প্লেয়ার বা এক্সটেনশন প্রয়োজন, যেমন HLS.js বা DASH.js, যার প্রয়োগ আলাদা আলাদা হয়।

এই গাইড থেকে HLS স্ট্রিম চালানোর জন্য HLS.js ও IMA DAI SDK কীভাবে কনফিগার করতে হয় তা জানতে পারবেন। এর সাথে DASH-এর জন্য ইমপ্লিমেন্টেশন সংক্রান্ত পার্থক্য সম্পর্কে গুরুত্বপূর্ণ নোটও দেওয়া আছে।

IMA-এর সাথে DASH DAI স্ট্রিম প্রয়োগ করার জন্য IMA DASH.js স্যাম্পেল অ্যাপ দেখুন।

মূল পয়েন্ট: DAI পড পরিবেশন ব্যবহার করতে, আপনাকে অবশ্যই পড পরিবেশন পার্টনারের সাথে কাজ করতে হবে এবং আপনার একটি Ad Manager 360 Advanced অ্যাকাউন্ট থাকতে হবে। আপনার Ad Manager অ্যাকাউন্ট থাকলে, আরও তথ্যের জন্য আপনার অ্যাকাউন্ট ম্যানেজারের সাথে যোগাযোগ করুন। Ad Manager-এ সাইন-আপ করার ব্যাপারে আরও জানতে, Ad Manager সহায়তা কেন্দ্র দেখুন।

মনে রাখবেন: অন্যান্য প্ল্যাটফর্মের সাথে ইন্টিগ্রেট করা বা IMA ক্লায়েন্ট-সাইড SDK ব্যবহার করার ব্যাপারে আরও তথ্য পেতে, Interactive Media Ads SDK দেখুন।

এক নজরে DAI পড পরিবেশন

IMA DAI SDK ব্যবহার করে পড পরিবেশন করার জন্য দুটি প্রধান কম্পোনেন্ট প্রয়োগ করতে হয়, যা এই নির্দেশিকায় দেখানো হয়েছে:

• PodStreamRequest / PodVodStreamRequest: Google-এর বিজ্ঞাপন সার্ভারে স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে এমন একটি অবজেক্ট। অনুরোধে একটি নেটওয়ার্ক কোড উল্লেখ করা হয় এবং PodStreamRequest-এর জন্য একটি কাস্টম অ্যাসেট কী ও ঐচ্ছিক API কী-ও প্রয়োজন। দুটিতেই অন্যান্য ঐচ্ছিক প্যারামিটার অন্তর্ভুক্ত থাকে।

• StreamManager: ভিডিও স্ট্রিম ও IMA DAI SDK-এর মধ্যে যোগাযোগ ম্যানেজ করে এমন একটি অবজেক্ট, যেমন ট্র্যাকিং পিং ফায়ার করা এবং প্রকাশককে স্ট্রিম ইভেন্ট ফরওয়ার্ড করা।

পূর্বশর্ত

শুরু করার আগে, আপনার এগুলি প্রয়োজন:

• তিনটি খালি ফাইল:

  • dai.html
  • dai.css
  • dai.js

• আপনার কম্পিউটারে Python ইনস্টল করা আছে, অথবা একটি ওয়েব সার্ভার বা অন্য হোস্ট করা ডেভেলপমেন্ট পরিবেশ যা পরীক্ষার জন্য ব্যবহার করা হবে

ডেভেলপমেন্ট এনভায়রনমেন্ট কনফিগার করা

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

1. কমান্ড লাইন ব্যবহার করে, আপনার index.html ফাইল আছে এমন ডিরেক্টরি থেকে রান করুন:

   python -m http.server 8000

   মনে রাখবেন: http.server শুধুমাত্র Python 3.x-এ উপলভ্য।

2. ওয়েব ব্রাউজার থেকে http://localhost:8000/ লিঙ্কে যান

   এছাড়াও, আপনি Apache HTTP Server-এর মতো অন্য কোনও হোস্ট করা ডেভেলপমেন্ট এনভায়রনমেন্ট বা ওয়েব সার্ভার ব্যবহার করতে পারেন।

ভিডিও প্লেয়ার তৈরি করুন

মনে রাখবেন: এই নির্দেশিকায় ধরে নেওয়া হয়েছে যে আপনি HLS স্ট্রিম প্লেব্যাক করার জন্য HLS.js লাইব্রেরি ব্যবহার করছেন। এছাড়াও, HTML5-এর জন্য IMA DAI SDK, Shaka প্লেয়ার বা DASH.js-এর মতো উপযুক্ত লাইব্রেরির সাহায্যে DASH স্ট্রিম সাপোর্ট করতে পারে।

প্রথমে, HTML5 ভিডিও এলিমেন্ট ও Ad UI এলিমেন্টের জন্য ব্যবহার করার জন্য একটি div তৈরি করতে dai.html পরিবর্তন করুন। এছাড়াও, dai.css ও dai.js ফাইল লোড করতে এবং hls.js ভিডিও প্লেয়ার ইমপোর্ট করতে প্রয়োজনীয় ট্যাগ যোগ করুন।

তারপর, পৃষ্ঠার এলিমেন্টের সাইজ ও পজিশন নির্দিষ্ট করতে dai.css পরিবর্তন করুন। সবশেষে, dai.js-এ, স্ট্রিম অনুরোধ সংক্রান্ত তথ্য হোল্ড করার জন্য ভেরিয়েবল এবং পৃষ্ঠা লোড হলে চালানোর জন্য initPlayer() ফাংশন ডিফাইন করুন।

স্ট্রিম অনুরোধের ধ্রুবকগুলি নিচে দেওয়া হল:

• BACKUP_STREAM: বিজ্ঞাপন প্রসেস করার সময় কোনও মারাত্মক সমস্যা হলে, ব্যাক-আপ স্ট্রিম চালানোর জন্য URL.

• STREAM_URL: শুধুমাত্র লাইভ স্ট্রিমের জন্য ব্যবহার করা হয়। আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা Pod Serving ব্যবহারকারী থার্ড-পার্টি পার্টনারের প্রদান করা ভিডিও স্ট্রিম URL. অনুরোধ করার আগে, আপনাকে IMA DAI SDK-এর দেওয়া স্ট্রিম আইডি যোগ করতে হবে। এই ক্ষেত্রে, স্ট্রিম URL-এ একটি প্লেসহোল্ডার, [[STREAMID]] থাকে, যা অনুরোধ করার আগে স্ট্রিম আইডির সাথে পরিবর্তন করা হয়।

• NETWORK_CODE: আপনার Ad Manager 360 অ্যাকাউন্টের নেটওয়ার্ক কোড।

• CUSTOM_ASSET_KEY: শুধুমাত্র লাইভ স্ট্রিমের জন্য ব্যবহার করা হয়। কাস্টম অ্যাসেট কী যা Ad Manager 360-তে আপনার পড পরিষেবা ইভেন্ট শনাক্ত করে। এটি আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা থার্ড-পার্টি পড পরিবেশনকারী পার্টনার তৈরি করতে পারে।

• API_KEY: শুধুমাত্র লাইভ স্ট্রিমের জন্য ব্যবহার করা হয়। একটি ঐচ্ছিক API কী যা IMA DAI SDK থেকে স্ট্রিম আইডি রিট্রিভ করার জন্য প্রয়োজন হতে পারে।

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="adUi"></div>
</body>
</html>

dai.css

#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Stream Config.
const STREAM_URL = "";
const NETWORK_CODE = "";
const CUSTOM_ASSET_KEY = "";
const API_KEY = "";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA DAI SDK লোড করা

এরপরে, dai.js-এর জন্য ট্যাগ এর আগে dai.html-এ স্ক্রিপ্ট ট্যাগ ব্যবহার করে DAI ফ্রেমওয়ার্ক যোগ করুন।

মনে রাখবেন: বিস্তারিত কনসোল লগ পেতে, আপনি ima3_dai.js-এর পরিবর্তে ima3_dai_debug.js ব্যবহার করতে পারেন। তবে, ima3_dai_debug.js প্রোডাকশন অ্যাপে ব্যবহার করা উচিত নয়।

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
...

StreamManager শুরু করুন এবং লাইভ বা VOD স্ট্রিমের অনুরোধ করুন

লাইভস্ট্রিম পড পরিবেশন করা

বিজ্ঞাপনের একটি সেট অনুরোধ করতে, একটি ima.dai.api.StreamManager তৈরি করুন, যা DAI স্ট্রিমের অনুরোধ করা ও ম্যানেজ করার জন্য দায়ী। কনস্ট্রাক্টর একটি ভিডিও এলিমেন্ট নেয় এবং এর ফলে প্রাপ্ত ইনস্ট্যান্স বিজ্ঞাপন ইন্টার‍্যাকশন ম্যানেজ করার জন্য একটি বিজ্ঞাপন UI এলিমেন্ট নেয়।

তারপর, পড পরিবেশনকারী লাইভ স্ট্রিমের অনুরোধ করার জন্য একটি ফাংশন নির্ধারণ করুন। এই ফাংশনটি প্রথমে একটি PodStreamRequest তৈরি করে, ধাপ ২-এ দেওয়া streamRequest প্যারামিটার দিয়ে এটি কনফিগার করে এবং তারপর সেই অনুরোধ অবজেক্টের সাথে streamManager.requestStream() কল করে।

গুরুত্বপূর্ণ পয়েন্ট: এই উদাহরণের কোনও স্ট্রিমই সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয়নি। আপনার স্ট্রিমের জন্য API Key প্রয়োজন হলে, DAI ভিডিও স্ট্রিম অনুরোধ যাচাই করুন দেখুন।

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

VOD পড পরিবেশন করা

বিজ্ঞাপনের একটি সেট অনুরোধ করতে, একটি ima.dai.api.StreamManager তৈরি করুন, যা DAI স্ট্রিমের অনুরোধ করা ও ম্যানেজ করার জন্য দায়ী। কনস্ট্রাক্টর একটি ভিডিও এলিমেন্ট নেয় এবং এর ফলে তৈরি হওয়া ইনস্ট্যান্স বিজ্ঞাপন সংক্রান্ত ইন্টার‍্যাকশন ম্যানেজ করার জন্য একটি বিজ্ঞাপন UI এলিমেন্ট নেয়।

তারপরে, পড পরিবেশনকারী VOD স্ট্রিমের অনুরোধ করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন। এই ফাংশন প্রথমে একটি PodVodStreamRequest তৈরি করে, ২ নম্বর ধাপে দেওয়া streamRequest প্যারামিটার দিয়ে এটি কনফিগার করে এবং তারপর সেই অনুরোধ অবজেক্টের সাথে streamManager.requestStream() কল করে।

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

স্ট্রিম ইভেন্ট ম্যানেজ করা

লাইভস্ট্রিম পড পরিবেশন করা

এরপরে, প্রধান ভিডিও ইভেন্টের জন্য ইভেন্ট লিসনার প্রয়োগ করুন। এই উদাহরণটি onStreamEvent() ফাংশন কল করে STREAM_INITIALIZED, ERROR, AD_BREAK_STARTED এবং AD_BREAK_ENDED ইভেন্ট ম্যানেজ করে। এই ফাংশনটি স্ট্রিম লোডিং ও সমস্যাগুলি ম্যানেজ করে, পাশাপাশি কোনও বিজ্ঞাপন চলার সময় প্লেয়ার কন্ট্রোল বন্ধ করে দেয়, যা SDK-এর প্রয়োজন। স্ট্রিম লোড করা হলে, ভিডিও প্লেয়ার loadStream() ফাংশন ব্যবহার করে প্রদত্ত URL লোড করে ও চালায়।

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    google.ima.dai.api.StreamEvent.Type.ERROR,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

VOD পড দেখানো হচ্ছে

এরপরে, প্রধান ভিডিও ইভেন্টের জন্য ইভেন্ট লিসনার প্রয়োগ করুন। এই উদাহরণে, onStreamEvent() ফাংশন কল করে STREAM_INITIALIZED, LOADED, ERROR, AD_BREAK_STARTED এবং AD_BREAK_ENDED ইভেন্ট ম্যানেজ করা হয়। এই ফাংশনটি স্ট্রিম লোডিং ও সমস্যাগুলি হ্যান্ডেল করে, পাশাপাশি কোনও বিজ্ঞাপন চলার সময় প্লেয়ার কন্ট্রোল বন্ধ করে দেয়, যা SDK-এর প্রয়োজন।

এছাড়াও, VOD পড পরিবেশন স্ট্রিমের জন্য StreamManager.loadStreamMetadata() কল করতে হবে STREAM_INITIALIZED ইভেন্টের উত্তরে। এছাড়াও, আপনার ভিডিও প্রযুক্তি পার্টনারের (VTP) থেকে স্ট্রিম URL-এর জন্য অনুরোধ করতে হবে। loadStreamMetadata() কল সফল হলে এটি একটি LOADED ইভেন্ট ট্রিগার করে, যেখানে আপনাকে স্ট্রিম লোড ও চালানোর জন্য আপনার স্ট্রিম URL সহ একটি loadStream() ফাংশন কল করতে হবে।

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    google.ima.dai.api.StreamEvent.Type.ERROR,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
    google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

স্ট্রিম মেটাডেটা ম্যানেজ করা

এই ধাপে, বিজ্ঞাপন ইভেন্ট ঘটলে SDK-কে জানানোর জন্য আপনি মেটাডেটার জন্য ইভেন্ট লিসনার প্রয়োগ করেন। ইন-স্ট্রিম মেটাডেটা ইভেন্ট শোনার বিষয়টি নির্ভর করে স্ট্রিম ফর্ম্যাট (HLS বা DASH), স্ট্রিমের ধরন (লাইভ বা VOD স্ট্রিম), আপনার প্লেয়ারের ধরন এবং ব্যবহৃত DAI ব্যাকএন্ডের ধরনের উপর। আরও তথ্যের জন্য আমাদের টাইমড মেটাডেটা গাইড দেখুন।

HLS স্ট্রিম ফর্ম্যাট (লাইভ ও VOD স্ট্রিম, HLS.js প্লেয়ার)

আপনি HLS.js প্লেয়ার ব্যবহার করলে, ID3 মেটাডেটা পেতে HLS.js FRAG_PARSING_METADATA ইভেন্ট শুনুন এবং StreamManager.processMetadata()-এর মাধ্যমে SDK-তে পাস করুন।

সবকিছু লোড হয়ে গেলে এবং রেডি হয়ে গেলে, ভিডিও অটোমেটিক চালাতে, প্লেব্যাক ট্রিগার করতে HLS.js MANIFEST_PARSED ইভেন্ট শুনুন।

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(event, data) {
  if (streamManager && data) {
    // For each ID3 tag in the metadata, pass in the type - ID3, the
    // tag data (a byte array), and the presentation timestamp (PTS).
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js (DASH স্ট্রিম ফর্ম্যাট, লাইভ ও VOD স্ট্রিম ধরন)

আপনি DASH.js প্লেয়ার ব্যবহার করলে, লাইভ বা VOD স্ট্রিমের জন্য ID3 মেটাডেটা শোনার জন্য আপনাকে আলাদা আলাদা স্ট্রিং ব্যবহার করতে হবে:

• লাইভস্ট্রিম: 'https://developer.apple.com/streaming/emsg-id3'
• VOD স্ট্রিম: 'urn:google:dai:2018'

StreamManager.processMetadata()-এর মাধ্যমে SDK-তে ID3 মেটাডেটা পাস করুন।

সবকিছু লোড হয়ে গেলে এবং রেডি হয়ে গেলে ভিডিও কন্ট্রোল অটোমেটিক দেখাতে, DASH.js MANIFEST_LOADED ইভেন্ট শুনুন।

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

লাইভ স্ট্রিম সহ Shaka Player (DASH স্ট্রিম ফর্ম্যাট)

আপনি লাইভ স্ট্রিম প্লেব্যাকের জন্য Shaka player ব্যবহার করলে, মেটাডেটা ইভেন্ট শোনার জন্য 'emsg' স্ট্রিং ব্যবহার করুন। তারপরে, আপনার কলে ইভেন্ট মেসেজ ডেটা ব্যবহার করে StreamManager.onTimedMetadata()।

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

VOD স্ট্রিম সহ Shaka Player (DASH স্ট্রিম ফর্ম্যাট)

VOD স্ট্রিম প্লেব্যাকের জন্য Shaka প্লেয়ার ব্যবহার করলে, মেটাডেটা ইভেন্ট শোনার জন্য 'timelineregionenter' স্ট্রিং ব্যবহার করুন। তারপরে, আপনার কলে ইভেন্ট মেসেজ ডেটা ব্যবহার করুন StreamManager.processMetadata() স্ট্রিং 'urn:google:dai:2018'-এর সাথে।

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

প্লেয়ার ইভেন্ট ম্যানেজ করা

বিজ্ঞাপন বিরতির সময় SDK পজ করলে ব্যবহারকারীকে প্লেব্যাক আবার চালু করার অনুমতি দিতে, ভিডিও এলিমেন্টের pause ও start ইভেন্টে ইভেন্ট লিসনার যোগ করুন।

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

IMA DAI অ্যাসেট ক্লিন-আপ করা

IMA DAI SDK-এর মাধ্যমে পড সার্ভিং স্ট্রিমে বিজ্ঞাপনের অনুরোধ করা এবং দেখানোর কাজ সফলভাবে শেষ করার পরে, পড সার্ভিং সেশন সম্পূর্ণ হলে আমরা আপনাকে যেকোনও রিসোর্স ক্লিন-আপ করার সাজেশন দিই। স্ট্রিম StreamManager.destroy() প্লেব্যাক বন্ধ করতে , সব বিজ্ঞাপন ট্র্যাকিং বন্ধ করতে এবং লোড করা সব স্ট্রিম অ্যাসেট রিলিজ করতে কল করুন।

আরও উন্নত SDK ফিচার সম্পর্কে জানতে, অন্যান্য গাইড বা GitHub-এ নমুনা দেখুন।