DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন, DAI এর জন্য IMA SDK সেট আপ করুন

প্ল্যাটফর্ম নির্বাচন করুন: HTML5 অ্যান্ড্রয়েড iOS tvOS কাস্ট রোকু

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 কী এবং Google বিজ্ঞাপন ম্যানেজার সেটিংসে নির্দিষ্ট বিজ্ঞাপন শনাক্তকারী পরিচালনা করার জন্য IMA SDK-এর জন্য একটি Google বিজ্ঞাপন ম্যানেজার নেটওয়ার্ক কোড অন্তর্ভুক্ত থাকতে পারে।
  • 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 Server ।

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

প্রথমে, dai.html পরিবর্তন করে একটি HTML5 ভিডিও উপাদান তৈরি করুন এবং ক্লিকথ্রুর জন্য একটি div ব্যবহার করুন। নিম্নলিখিত উদাহরণটি IMA DAI SDK আমদানি করে। আরও বিস্তারিত জানার জন্য, IMA DAI SDK আমদানি করুন দেখুন।

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

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>


dai.html
#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}

dai.css
// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

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

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
dai.js

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

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
dai.js

IMA DAI SDK লোড করুন

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

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
dai.html

স্ট্রিমম্যানেজার আরম্ভ করুন

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

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
dai.js

একটি স্ট্রিম অনুরোধ করুন

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

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
dai.js

উভয় স্ট্রিম অনুরোধ পদ্ধতিতে একটি ঐচ্ছিক API কী ব্যবহার করা হয়। যদি আপনি একটি সুরক্ষিত স্ট্রিম ব্যবহার করেন, তাহলে আপনাকে একটি DAI প্রমাণীকরণ কী তৈরি করতে হবে। আরও বিস্তারিত জানার জন্য, DAI ভিডিও স্ট্রিম অনুরোধ প্রমাণীকরণ দেখুন। এই উদাহরণে কোনও স্ট্রিমই DAI প্রমাণীকরণ কী ব্যবহার করে সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয় না।

স্ট্রিম মেটাডেটা পার্স করুন

টাইমড মেটাডেটা ইভেন্ট শোনার জন্য আপনাকে একটি হ্যান্ডলার যোগ করতে হবে এবং ইভেন্টগুলিকে StreamManager ক্লাসে ফরোয়ার্ড করতে হবে যাতে IMA বিজ্ঞাপন বিরতির সময় বিজ্ঞাপন ইভেন্টগুলি নির্গত করতে পারে: 

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Timed metadata is handled differently by different video players, and the
  // IMA SDK provides two ways to pass in metadata,
  // StreamManager.processMetadata() and StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we 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);
      });
    }
  });
}
dai.js

এই নির্দেশিকাটি স্ট্রিম প্লেব্যাকের জন্য hls.js প্লেয়ার ব্যবহার করে, তবে আপনার মেটাডেটা বাস্তবায়ন আপনি যে ধরণের প্লেয়ার ব্যবহার করেন তার উপর নির্ভর করে।

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

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

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
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');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
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();
  });
}
dai.js

স্ট্রিমটি লোড হলে, ভিডিও প্লেয়ারটি loadUrl() ফাংশন ব্যবহার করে প্রদত্ত URLটি লোড করে এবং চালায়।

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