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

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

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

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

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

IMA DAI ওভারভিউ

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

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

পূর্বশর্ত

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

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

যেহেতু IMA 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 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";

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

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

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

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

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

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

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

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