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

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

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

সম্পূর্ণ পরিষেবা DAI

এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন সহ দেখতে বা অনুসরণ করতে চান, GitHub থেকে সাধারণ উদাহরণটি ডাউনলোড করুন।

IMA DAI ওভারভিউ

IMA DAI SDK বাস্তবায়নে এই নির্দেশিকায় প্রদর্শিত দুটি প্রধান উপাদান জড়িত:

  • StreamRequest — হয় একটি VODStreamRequest বা একটি LiveStreamRequest : একটি বস্তু যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। লাইভ স্ট্রিম অনুরোধ একটি সম্পদ কী নির্দিষ্ট করে, যখন VOD অনুরোধ একটি CMS আইডি এবং ভিডিও আইডি নির্দিষ্ট করে। উভয় ধরনের অনুরোধের মধ্যে ঐচ্ছিকভাবে নির্দিষ্ট স্ট্রীম অ্যাক্সেস করার জন্য প্রয়োজনীয় একটি API কী এবং IMA SDK-এর জন্য Google Ad Manager সেটিংসে উল্লেখ করা বিজ্ঞাপন শনাক্তকারী পরিচালনা করার জন্য Google Ad Manager নেটওয়ার্ক কোড অন্তর্ভুক্ত থাকতে পারে।
  • StreamManager : একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।

পূর্বশর্ত

  • তিনটি খালি ফাইল
    • dai.html
    • dai.css
    • dai.js
  • আপনার কম্পিউটারে পাইথন ইনস্টল করা, বা পরীক্ষার জন্য ব্যবহার করার জন্য একটি ওয়েব সার্ভার

একটি উন্নয়ন সার্ভার শুরু করুন

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

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

    python -m http.server 8000

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

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

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

প্রথমে, একটি সাধারণ HTML5 ভিডিও উপাদান তৈরি করতে dai.html পরিবর্তন করুন এবং ক্লিকথ্রুতে ব্যবহার করার জন্য একটি div তৈরি করুন৷ এছাড়াও dai.css এবং dai.js ফাইল লোড করতে, সেইসাথে hls.js ভিডিও প্লেয়ার আমদানি করতে প্রয়োজনীয় ট্যাগ যোগ করুন। তারপর, পৃষ্ঠা উপাদানগুলির আকার এবং অবস্থান নির্দিষ্ট করতে dai.css পরিবর্তন করুন৷ অবশেষে, dai.js- এ, স্ট্রীম অনুরোধের তথ্য ধরে রাখার জন্য ভেরিয়েবল এবং পৃষ্ঠা লোড হওয়ার সময় একটি initPlayer() ফাংশন সংজ্ঞায়িত করুন।

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK লোড করুন

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

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 উপাদান লাগে৷

তারপর, স্ট্রীম অনুরোধ যে ফাংশন সংজ্ঞায়িত. এই উদাহরণে VOD এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপর streamRequest প্যারামিটার সহ streamManager.requestStream() কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে একটি হ্যান্ডলার যোগ করতে হবে যাতে সময়মতো মেটাডেটা ইভেন্টগুলি শোনা যায় এবং ইভেন্টগুলিকে StreamManager এ ফরওয়ার্ড করতে হয়। আপনি আপনার ব্যবহারের ক্ষেত্রে মানানসই কোড মন্তব্য বা মন্তব্য করতে পারেন. উভয় পদ্ধতি একটি ঐচ্ছিক API কী নেয়। আপনি যদি একটি সুরক্ষিত স্ট্রীম ব্যবহার করেন, তাহলে আপনাকে একটি DAI প্রমাণীকরণ কী তৈরি করতে হবে।

এই উদাহরণের কোনো স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয় না।

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

স্ট্রিম ইভেন্টগুলি পরিচালনা করুন

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

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

DAI-এর সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই IMA DAI SDK-তে লাইভস্ট্রিমের জন্য ID3 ইভেন্ট পাস করতে হবে, যেমনটি নমুনা কোডে দেখানো হয়েছে।

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     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.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 SDK-এর সাথে বিজ্ঞাপন প্রদর্শন করছেন৷ আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, GitHub-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।

,

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

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

সম্পূর্ণ পরিষেবা DAI

এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন সহ দেখতে বা অনুসরণ করতে চান, GitHub থেকে সাধারণ উদাহরণটি ডাউনলোড করুন।

IMA DAI ওভারভিউ

IMA DAI SDK বাস্তবায়নে এই নির্দেশিকায় প্রদর্শিত দুটি প্রধান উপাদান জড়িত:

  • StreamRequest — হয় একটি VODStreamRequest বা একটি LiveStreamRequest : একটি বস্তু যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। লাইভ স্ট্রিম অনুরোধ একটি সম্পদ কী নির্দিষ্ট করে, যখন VOD অনুরোধ একটি CMS আইডি এবং ভিডিও আইডি নির্দিষ্ট করে। উভয় ধরনের অনুরোধের মধ্যে ঐচ্ছিকভাবে নির্দিষ্ট স্ট্রীম অ্যাক্সেস করার জন্য প্রয়োজনীয় একটি API কী এবং IMA SDK-এর জন্য Google Ad Manager সেটিংসে উল্লেখ করা বিজ্ঞাপন শনাক্তকারী পরিচালনা করার জন্য Google Ad Manager নেটওয়ার্ক কোড অন্তর্ভুক্ত থাকতে পারে।
  • StreamManager : একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।

পূর্বশর্ত

  • তিনটি খালি ফাইল
    • dai.html
    • dai.css
    • dai.js
  • আপনার কম্পিউটারে পাইথন ইনস্টল করা, বা পরীক্ষার জন্য ব্যবহার করার জন্য একটি ওয়েব সার্ভার

একটি উন্নয়ন সার্ভার শুরু করুন

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

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

    python -m http.server 8000

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

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

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

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

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK লোড করুন

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

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 উপাদান লাগে৷

তারপর, স্ট্রীম অনুরোধ যে ফাংশন সংজ্ঞায়িত. এই উদাহরণে VOD এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপর streamRequest প্যারামিটার সহ streamManager.requestStream() কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে একটি হ্যান্ডলার যোগ করতে হবে যাতে সময়মতো মেটাডেটা ইভেন্টগুলি শোনা যায় এবং ইভেন্টগুলিকে StreamManager এ ফরওয়ার্ড করতে হয়। আপনি আপনার ব্যবহারের ক্ষেত্রে মানানসই কোড মন্তব্য বা মন্তব্য করতে পারেন. উভয় পদ্ধতি একটি ঐচ্ছিক API কী নেয়। আপনি যদি একটি সুরক্ষিত স্ট্রীম ব্যবহার করেন, তাহলে আপনাকে একটি DAI প্রমাণীকরণ কী তৈরি করতে হবে।

এই উদাহরণের কোনো স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয় না।

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

স্ট্রিম ইভেন্টগুলি পরিচালনা করুন

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

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

DAI-এর সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই IMA DAI SDK-তে লাইভস্ট্রিমের জন্য ID3 ইভেন্ট পাস করতে হবে, যেমনটি নমুনা কোডে দেখানো হয়েছে।

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     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.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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 SDK-এর সাথে বিজ্ঞাপন প্রদর্শন করছেন৷ আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, GitHub-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।

,

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

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

সম্পূর্ণ পরিষেবা DAI

এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা সংহতকরণের সাথে দেখতে বা অনুসরণ করতে চান তবে গিথুব থেকে সাধারণ উদাহরণটি ডাউনলোড করুন।

IMA DAI ওভারভিউ

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

  • StreamRequest - হয় একটি VODStreamRequest বা একটি LiveStreamRequest : একটি অবজেক্ট যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। লাইভ স্ট্রিম অনুরোধ একটি সম্পদ কী নির্দিষ্ট করে, যখন VOD অনুরোধ একটি CMS আইডি এবং ভিডিও আইডি নির্দিষ্ট করে। উভয় ধরনের অনুরোধের মধ্যে ঐচ্ছিকভাবে নির্দিষ্ট স্ট্রীম অ্যাক্সেস করার জন্য প্রয়োজনীয় একটি API কী এবং IMA SDK-এর জন্য Google Ad Manager সেটিংসে উল্লেখ করা বিজ্ঞাপন শনাক্তকারী পরিচালনা করার জন্য Google Ad Manager নেটওয়ার্ক কোড অন্তর্ভুক্ত থাকতে পারে।
  • StreamManager : একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।

পূর্বশর্ত

  • তিনটি খালি ফাইল
    • 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() ফাংশনটি ধরে রাখতে ভেরিয়েবলগুলি সংজ্ঞায়িত করুন।

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK লোড করুন

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

তারপরে, ফাংশনগুলি সংজ্ঞায়িত করুন যা স্ট্রিমগুলি অনুরোধ করে। এই উদাহরণে ভিওডি এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন অন্তর্ভুক্ত রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপরে streamManager.requestStream() streamRequest প্যারামিটারগুলির সাথে কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে সময়সীমার মেটাডেটা ইভেন্টগুলি শোনার জন্য এবং ইভেন্টগুলি StreamManager কাছে ফরোয়ার্ড করার জন্য একটি হ্যান্ডলার যুক্ত করতে হবে। আপনার ব্যবহারের ক্ষেত্রে ফিট করার জন্য আপনি কোডটি মন্তব্য করতে বা আপত্তি করতে পারেন। উভয় পদ্ধতি একটি al চ্ছিক এপিআই কী গ্রহণ করে। আপনি যদি কোনও সুরক্ষিত স্ট্রিম ব্যবহার করছেন তবে আপনাকে একটি ডিএআই প্রমাণীকরণ কী তৈরি করতে হবে।

এই উদাহরণে কোনও স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহৃত হয় না।

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

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

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

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

ডিএআইয়ের সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই নমুনা কোডে দেখানো হিসাবে আইএমএ ডিএআই এসডিকে লাইভস্ট্রিমের জন্য আইডি 3 ইভেন্টগুলি পাস করতে হবে।

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     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.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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

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

সম্পূর্ণ পরিষেবা DAI

এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা সংহতকরণের সাথে দেখতে বা অনুসরণ করতে চান তবে গিথুব থেকে সাধারণ উদাহরণটি ডাউনলোড করুন।

IMA DAI ওভারভিউ

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

  • StreamRequest - হয় একটি VODStreamRequest বা একটি LiveStreamRequest : একটি অবজেক্ট যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। লাইভ স্ট্রিম অনুরোধ একটি সম্পদ কী নির্দিষ্ট করে, যখন VOD অনুরোধ একটি CMS আইডি এবং ভিডিও আইডি নির্দিষ্ট করে। উভয় ধরনের অনুরোধের মধ্যে ঐচ্ছিকভাবে নির্দিষ্ট স্ট্রীম অ্যাক্সেস করার জন্য প্রয়োজনীয় একটি API কী এবং IMA SDK-এর জন্য Google Ad Manager সেটিংসে উল্লেখ করা বিজ্ঞাপন শনাক্তকারী পরিচালনা করার জন্য Google Ad Manager নেটওয়ার্ক কোড অন্তর্ভুক্ত থাকতে পারে।
  • StreamManager : একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।

পূর্বশর্ত

  • তিনটি খালি ফাইল
    • 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() ফাংশনটি ধরে রাখতে ভেরিয়েবলগুলি সংজ্ঞায়িত করুন।

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 DAI 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'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

// Ad Manager network code.
var NETWORK_CODE = 'NETWORK_CODE';

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

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

IMA DAI SDK লোড করুন

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

তারপরে, ফাংশনগুলি সংজ্ঞায়িত করুন যা স্ট্রিমগুলি অনুরোধ করে। এই উদাহরণে ভিওডি এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন অন্তর্ভুক্ত রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপরে streamManager.requestStream() streamRequest প্যারামিটারগুলির সাথে কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে সময়সীমার মেটাডেটা ইভেন্টগুলি শোনার জন্য এবং ইভেন্টগুলি StreamManager কাছে ফরোয়ার্ড করার জন্য একটি হ্যান্ডলার যুক্ত করতে হবে। আপনার ব্যবহারের ক্ষেত্রে ফিট করার জন্য আপনি কোডটি মন্তব্য করতে বা আপত্তি করতে পারেন। উভয় পদ্ধতি একটি al চ্ছিক এপিআই কী গ্রহণ করে। আপনি যদি কোনও সুরক্ষিত স্ট্রিম ব্যবহার করছেন তবে আপনাকে একটি ডিএআই প্রমাণীকরণ কী তৈরি করতে হবে।

এই উদাহরণে কোনও স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহৃত হয় না।

dai.js

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

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(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(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null, NETWORK_CODE);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null, NETWORK_CODE);
}

function requestVODStream(cmsId, videoId, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey, networkCode) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.networkCode = networkCode;
  streamManager.requestStream(streamRequest);
}

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

অবশেষে, আপনাকে বড় ভিডিও ইভেন্টগুলির জন্য ইভেন্ট শ্রোতাদের প্রয়োগ করতে হবে। This simple example handles the LOADED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK. When the stream is loaded, the video player loads and plays the provided URL using a loadUrl() function.

You might also want to set up event listeners for the video element's pause and start events to allow the user to resume playback when the IMA pauses during ad breaks.

To work with DAI, your custom player must pass ID3 events for livestreams to the IMA DAI SDKs as shown in the sample code.

dai.js

var isAdBreak;

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

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     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.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      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 loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

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

তাই তো! You're now requesting and displaying ads with the IMA DAI SDK. To learn about more advanced SDK features, see the other guides or the samples on GitHub .