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-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।

,

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 রিলিজ পৃষ্ঠা থেকে এই নমুনা অ্যাপগুলি ডাউনলোড করতে পারেন।

ডাই পড পরিবেশন ওভারভিউ

আইএমএ ডাই এসডিকে ব্যবহার করে পিওড পরিবেশন বাস্তবায়নে দুটি প্রধান উপাদান জড়িত, যা এই গাইডে প্রদর্শিত হয়:

  • PodStreamRequest / PodVodStreamRequest : এমন একটি বস্তু যা গুগলের বিজ্ঞাপন সার্ভারগুলিতে একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। অনুরোধগুলি একটি নেটওয়ার্ক কোড নির্দিষ্ট করে, এবং PodStreamRequest জন্য একটি কাস্টম সম্পদ কী এবং একটি al চ্ছিক এপিআই কী প্রয়োজন। উভয়ই অন্যান্য al চ্ছিক পরামিতি অন্তর্ভুক্ত।

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

পূর্বশর্ত

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

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

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

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

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

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

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

    python -m http.server 8000

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

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

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

প্রথমত, এডি ইউআই উপাদানগুলির জন্য ব্যবহার করার জন্য একটি সাধারণ এইচটিএমএল 5 ভিডিও উপাদান এবং একটি ডিভ তৈরি করতে DAI.HTML সংশোধন করুন। DAI.CSS এবং DAI.JS ফাইলগুলি লোড করার পাশাপাশি hls.js ভিডিও প্লেয়ার আমদানি করতে প্রয়োজনীয় ট্যাগগুলি যুক্ত করুন।

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

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

  • BACKUP_STREAM : বিজ্ঞাপন প্রক্রিয়াটি মারাত্মক ত্রুটির মুখোমুখি হওয়ার ক্ষেত্রে ব্যাকআপ স্ট্রিমের জন্য একটি ইউআরএল খেলতে হবে।

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

  • NETWORK_CODE : আপনার বিজ্ঞাপন পরিচালক 360 অ্যাকাউন্টের জন্য নেটওয়ার্ক কোড।

  • CUSTOM_ASSET_KEY : কেবল লাইভস্ট্রিমের জন্য ব্যবহৃত । কাস্টম অ্যাসেট কী যা আপনার পিওডি পরিবেশন ইভেন্টটি এডি ম্যানেজার 360 এ সনাক্ত করে This এটি আপনার ম্যানিফেস্ট ম্যানিপুলেটর বা তৃতীয় পক্ষের পিওডি পরিবেশনকারী অংশীদার দ্বারা তৈরি করা যেতে পারে।

  • API_KEY : কেবল লাইভস্ট্রিমের জন্য ব্যবহৃত । একটি al চ্ছিক এপিআই কী যা আইএমএ ডাই এসডিকে থেকে একটি স্ট্রিম আইডি পুনরুদ্ধার করতে প্রয়োজন হতে পারে।

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

আইএমএ ডাই এসডিকে লোড করুন

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

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

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

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

স্ট্রিম ইভেন্টগুলি হ্যান্ডেল করুন

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

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

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

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

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

তদ্ব্যতীত, ভিওডি পিওডি পরিবেশনকারী স্ট্রিমগুলিতে StreamManager.loadStreamMetadata() কল করা প্রয়োজন STREAM_INITIALIZED আপনার, ভিডিও প্রযুক্তি অংশীদার (ভিটিপি) থেকে আপনাকে একটি স্ট্রিম ইউআরএল অনুরোধ করতে হবে। একবার loadStreamMetadata() কলটি সফল হয়ে গেলে এটি একটি LOADED ইভেন্টের ট্রিগার করে, যেখানে আপনার স্ট্রিমটি লোড করতে এবং খেলতে আপনার স্ট্রিম ইউআরএল দিয়ে একটি 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);
}

হ্যান্ডেল স্ট্রিম মেটাডেটা

এই পদক্ষেপে আপনি বিজ্ঞাপনের ঘটনাগুলি ঘটে যখন এসডিকে অবহিত করার জন্য মেটাডেটার জন্য ইভেন্ট শ্রোতাদের বাস্তবায়ন করেন। স্ট্রিম ফর্ম্যাট (এইচএলএস বা ড্যাশ), স্ট্রিমের ধরণ (লাইভ বা ভিওডি স্ট্রিম), আপনার প্লেয়ারের ধরণ এবং ডিএআই ব্যাকএন্ডের ধরণটি ব্যবহার করা হচ্ছে তার উপর নির্ভর করে ইন-স্ট্রিম মেটাডেটা ইভেন্টগুলির জন্য শোনা পরিবর্তিত হতে পারে। আরও তথ্যের জন্য আমাদের সময়সীমার মেটাডেটা গাইড দেখুন।

এইচএলএস স্ট্রিম ফর্ম্যাট (লাইভ এবং ভিওডি স্ট্রিমস, এইচএলএস.জেএস প্লেয়ার)

আপনি যদি এইচএলএস.জেএস প্লেয়ার ব্যবহার করছেন তবে আইডি 3 মেটাডেটা পেতে এইচএলএস.জেএস FRAG_PARSING_METADATA ইভেন্টটি শুনুন এবং এটি StreamManager.processMetadata() এর সাথে এসডিকে পাস করুন।

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

ড্যাশ.জেএস (ড্যাশ স্ট্রিম ফর্ম্যাট, লাইভ এবং ভিওডি স্ট্রিম প্রকার)

আপনি যদি ড্যাশ.জেএস প্লেয়ার ব্যবহার করছেন তবে লাইভ বা ভিওডি স্ট্রিমগুলির জন্য আইডি 3 মেটাডেটা শুনতে আপনাকে বিভিন্ন স্ট্রিং ব্যবহার করতে হবে:

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

StreamManager.processMetadata() এর সাথে আইডি 3 মেটাডেটা এসডিকে পাস করুন।

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

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

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

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

এটাই! আপনি এখন এইচটিএমএল 5 এর জন্য আইএমএ ডাই এসডিকে সহ একটি পিওডি পরিবেশন স্ট্রিমে বিজ্ঞাপনগুলির জন্য অনুরোধ করছেন এবং প্রদর্শন করছেন। আরও উন্নত এসডিকে বৈশিষ্ট্যগুলি সম্পর্কে জানতে, গিটহাবের অন্যান্য গাইড বা নমুনাগুলি দেখুন।