IMA DAI SDK দিয়ে শুরু করুন

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

আপনি আগ্রহী DAI সমাধান নির্বাচন করুন

পড পরিবেশন 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 : একটি বস্তু যা Google-এর বিজ্ঞাপন সার্ভারে একটি স্ট্রিম অনুরোধ সংজ্ঞায়িত করে। অনুরোধগুলি একটি নেটওয়ার্ক কোড নির্দিষ্ট করে, এবং PodStreamRequest এর জন্য একটি কাস্টম সম্পদ কী এবং একটি ঐচ্ছিক API কী প্রয়োজন৷ উভয় অন্যান্য ঐচ্ছিক পরামিতি অন্তর্ভুক্ত.

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

পূর্বশর্ত

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

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

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

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

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

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

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

    python -m http.server 8000

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

    আপনি অন্য কোনো হোস্ট করা উন্নয়ন পরিবেশ বা ওয়েব সার্ভার ব্যবহার করতে পারেন, যেমন Apache HTTP সার্ভার ।

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

প্রথমে, একটি সাধারণ 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 : শুধুমাত্র লাইভস্ট্রিমের জন্য ব্যবহার করা হয় । অ্যাড ম্যানেজার 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="ad-ui"></div>
</body>
</html>

dai.css

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

#ad-ui {
  cursor: pointer;
}

dai.js

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

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
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>
...

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

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

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

তারপর, লাইভস্ট্রিম পরিবেশন করা পডকে অনুরোধ করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন। এই ফাংশনটি প্রথমে একটি PodStreamRequest তৈরি করে, ধাপ 2 এ প্রদত্ত 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 উপাদান লাগে।

তারপর, VOD স্ট্রিম পরিবেশন করা পডকে অনুরোধ করার জন্য একটি ফাংশন সংজ্ঞায়িত করুন। এই ফাংশনটি প্রথমে একটি PodVodStreamRequest তৈরি করে, ধাপ 2 এ প্রদত্ত 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-এর দ্বারা প্রয়োজনীয়৷

এছাড়াও, STREAM_INITIALIZED ইভেন্টের প্রতিক্রিয়া হিসাবে VOD পড পরিবেশন স্ট্রীমগুলির 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);
}

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

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

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

ভিডিও উপাদানের pause ইভেন্ট শ্রোতাদের যোগ করুন এবং বিজ্ঞাপন বিরতির সময় SDK বিরতি দিলে ব্যবহারকারীকে প্লেব্যাক পুনরায় শুরু করার অনুমতি দেওয়ার জন্য ইভেন্টগুলি 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';
  }
}

এটাই! আপনি এখন HTML5 এর জন্য IMA DAI SDK-এর সাথে একটি পড সার্ভিং স্ট্রীমে বিজ্ঞাপনের অনুরোধ করছেন এবং প্রদর্শন করছেন৷ আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, GitHub-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।