DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন

প্ল্যাটফর্ম নির্বাচন করুন: HTML5 Android iOS tvOS Cast Roku

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

আপনার পছন্দের DAI সমাধানটি নির্বাচন করুন।

পড সার্ভিং ডিএআই

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

DAI পড পরিবেশনের সংক্ষিপ্ত বিবরণ

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

  • PodStreamRequest / PodVodStreamRequest : একটি অবজেক্ট যা গুগলের বিজ্ঞাপন সার্ভারগুলিতে একটি স্ট্রিম অনুরোধ নির্ধারণ করে। অনুরোধগুলিতে একটি নেটওয়ার্ক কোড নির্দিষ্ট করা থাকে, এবং PodStreamRequest জন্য একটি কাস্টম অ্যাসেট কী (Custom Asset Key ) ও একটি ঐচ্ছিক এপিআই কী (API key )-এরও প্রয়োজন হয়। উভয়টিতেই অন্যান্য ঐচ্ছিক প্যারামিটার অন্তর্ভুক্ত থাকে।

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

পূর্বশর্ত

শুরু করার আগে আপনার নিম্নলিখিত জিনিসগুলো প্রয়োজন হবে:

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

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

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

একটি উন্নয়ন পরিবেশ কনফিগার করুন

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

  1. আপনার index.html ফাইলটি যে ডিরেক্টরিতে রয়েছে, সেখান থেকে কমান্ড লাইন ব্যবহার করে নিম্নলিখিত কমান্ডটি চালান: 

    python -m http.server 8000

  2. ওয়েব ব্রাউজারে http://localhost:8000/ এ যান।

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

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

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

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

স্ট্রিম অনুরোধের ধ্রুবকগুলো নিম্নরূপ:

  • BACKUP_STREAM : বিজ্ঞাপন প্রক্রিয়াকরণে কোনো মারাত্মক ত্রুটি ঘটলে, সেটি চালানোর জন্য একটি ব্যাকআপ স্ট্রিমের URL।

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

  • NETWORK_CODE : আপনার অ্যাড ম্যানেজার ৩৬০ অ্যাকাউন্টের নেটওয়ার্ক কোড।

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

  • 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.html ফাইলে dai.js ট্যাগের আগে একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করে DAI ফ্রেমওয়ার্কটি যুক্ত করুন।

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>
...

স্ট্রিমম্যানেজার চালু করুন এবং একটি লাইভ বা ভিওডি স্ট্রিমের জন্য অনুরোধ করুন।

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

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

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

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);
}

ভিওডি পড পরিবেশন

একগুচ্ছ বিজ্ঞাপনের জন্য অনুরোধ করতে, একটি 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);
}

ভিওডি পড পরিবেশন

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

এছাড়াও, VOD পড সার্ভিং স্ট্রিমগুলির জন্য STREAM_INITIALIZED ইভেন্টের প্রতিক্রিয়ায় StreamManager.loadStreamMetadata() কল করতে হয়। আপনাকে আপনার ভিডিও টেকনোলজি পার্টনার (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() ব্যবহার করে ID3 মেটাডেটা SDK-তে পাঠান।

সবকিছু লোড ও প্রস্তুত হয়ে যাওয়ার পর ভিডিও কন্ট্রোলগুলো স্বয়ংক্রিয়ভাবে দেখানোর জন্য, 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);
}

লাইভস্ট্রিম সহ শাকা প্লেয়ার (ড্যাশ স্ট্রিম ফরম্যাট)

আপনি যদি লাইভস্ট্রিম প্লেব্যাকের জন্য শাকা প্লেয়ার ব্যবহার করেন, তাহলে মেটাডেটা ইভেন্ট শোনার জন্য '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 স্ট্রিম সহ শাকা প্লেয়ার (DASH স্ট্রিম ফরম্যাট)

আপনি যদি VOD স্ট্রিম প্লেব্যাকের জন্য শাকা প্লেয়ার ব্যবহার করেন, তাহলে মেটাডেটা ইভেন্ট শোনার জন্য '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);
       }
}

খেলোয়াড়ের ইভেন্টগুলি পরিচালনা করুন

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

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() কল করুন।

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