Pod পরিষেবা DAI-এর মাধ্যমে সেট-আপ করা

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

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

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

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

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

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

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

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

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

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

  • STREAM_URL: শুধুমাত্র লাইভস্ট্রিমের জন্য ব্যবহার করা হয়। আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা পড সার্ভিং ব্যবহারকারী থার্ড-পার্টি পার্টনারের প্রদান করা ভিডিও স্ট্রিম 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 ফ্রেমওয়ার্ক যোগ করুন।

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

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 এলিমেন্ট নেয়।

তারপর, Pod Serving 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 পড পরিবেশন স্ট্রিমের জন্য 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()-এর মাধ্যমে 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' স্ট্রিং ব্যবহার করুন। তারপর, 'urn:google:dai:2018' স্ট্রিং সহ StreamManager.processMetadata()-এ আপনার কলে ইভেন্ট মেসেজ ডেটা ব্যবহার করুন।

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-এ স্যাম্পেল দেখুন।