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 : কেবল লাইভস্ট্রিমের জন্য ব্যবহৃত । কাস্টম অ্যাসেট কী যা আপনার পিওডি পরিবেশন ইভেন্টটি AD ম্যানেজার 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 এর জন্য আইএমএ ডাই এসডিকে সহ একটি পিওডি পরিবেশন স্ট্রিমে বিজ্ঞাপনগুলির জন্য অনুরোধ করছেন এবং প্রদর্শন করছেন। আরও উন্নত এসডিকে বৈশিষ্ট্যগুলি সম্পর্কে জানতে, গিটহাবের অন্যান্য গাইড বা নমুনাগুলি দেখুন।

,

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

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

পোড পরিবেশন ডাই

এই গাইডটি প্রদর্শন করে যে কীভাবে লাইভ বা ভিওডি সামগ্রীর জন্য একটি ডাই পড পরিবেশন স্ট্রিম খেলতে হয়, এইচটিএমএল 5 এর জন্য আইএমএ ডাই এসডিকে ব্যবহার করে একটি ভিডিও প্লেয়ার যা প্লেব্যাকের জন্য এইচএলএস.জেএসে নির্ভর করে। আপনি যদি এইচএলএস.জেএস এবং সাফারি প্লেব্যাক উভয়ের জন্য সমর্থন সহ একটি সম্পূর্ণ নমুনা সংহতকরণের সাথে দেখতে বা অনুসরণ করতে চান তবে এইচএলএস পিওডি পরিবেশন উদাহরণ দেখুন। ড্যাশ.জেএস সমর্থনের জন্য, ড্যাশ পড পরিবেশন উদাহরণ দেখুন। আপনি এইচটিএমএল 5 ডাই গিটহাব রিলিজ পৃষ্ঠা থেকে এই নমুনা অ্যাপ্লিকেশনগুলি ডাউনলোড করতে পারেন।

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

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

  • 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 : কেবল লাইভস্ট্রিমের জন্য ব্যবহৃত । কাস্টম অ্যাসেট কী যা আপনার পিওডি পরিবেশন ইভেন্টটি AD ম্যানেজার 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 You also need to request a stream URL from your, video technology partner (VTP). Once the loadStreamMetadata() call succeeds it triggers a LOADED event, where you should call a loadStream() function with your stream URL to load and play the stream. 

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

Handle stream metadata

In this step you implement event listeners for metadata to notify the SDK when ad events occur. Listening for in-stream metadata events can vary, depending on the stream format (HLS or DASH), the stream type (Live or VOD stream), your player type, and the type of DAI backend being used. See our Timed Metadata guide for more information.

HLS stream format (Live and VOD streams, HLS.js player)

If you are using an HLS.js player, listen to the HLS.js FRAG_PARSING_METADATA event to get ID3 metadata and pass it to the SDK with StreamManager.processMetadata() .

To automatically play the video after everything is loaded and ready, listen to the HLS.js MANIFEST_PARSED event to trigger playback. 

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 streams format, Live and VOD stream type)

If you are using a DASH.js player, you have to use different strings to listen for ID3 metadata for Live or VOD streams:

  • Livestreams: 'https://developer.apple.com/streaming/emsg-id3'
  • VOD streams: 'urn:google:dai:2018'

Pass the ID3 metadata to the SDK with StreamManager.processMetadata() .

To automatically show the video controls after everything is loaded and ready, listen to the DASH.js MANIFEST_LOADED event. 

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

Shaka Player with livestreams (DASH streams format)

If you are using Shaka player for livestream playback, use the string 'emsg' to listen for metadata events. Then, use the event message data in your call to 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});
}

Shaka Player with VOD streams (DASH streams format)

If you are using Shaka player for VOD stream playback, use the string 'timelineregionenter' to listen for metadata events. Then, use the event message data in your call to StreamManager.processMetadata() with the string '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);
       }
}

Handle player events

Add event listeners to the video element's pause and start events to allow the user to resume playback when the SDK pauses during ad breaks. 

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

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

,

IMA SDKs make it easy to integrate multimedia ads into your websites and apps. IMA SDK যেকোন VAST-সঙ্গী বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে পারে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক পরিচালনা করতে পারে। With IMA DAI SDKs, apps make a stream request for ad and content video—either VOD or live content. The SDK then returns a combined video stream, so that you don't have to manage switching between ad and content video within your app.

Select the DAI solution you're interested in

Pod serving DAI

This guide demonstrates how to play a DAI Pod Serving stream for live or VOD content, using the IMA DAI SDK for HTML5 with a video player that relies on hls.js for playback. If you would like to view or follow along with a completed sample integration, with support for both HLS.js and Safari Playback, see the HLS pod serving example . For DASH.js support, see the DASH pod serving example . You can download these sample apps from the HTML5 DAI GitHub release page .

DAI Pod Serving overview

Implementing pod serving using the IMA DAI SDK involves two main components, which are demonstrated in this guide:

  • PodStreamRequest / PodVodStreamRequest : An object that defines a stream request to Google's advertising servers. Requests specify a Network Code , and the PodStreamRequest also requires a Custom Asset Key , and an optional API key . Both include other optional parameters.

  • StreamManager : An object that handles communication between the video stream and the IMA DAI SDK, such as firing tracking pings and forwarding stream events to the publisher.

পূর্বশর্ত

Before you begin, you need the following:

  • Three empty files:

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

  • Python installed on your computer, or a web server or other hosted development environment to use for testing

Configure a development environment

Since the SDK loads dependencies using the same protocol as the page from which it's loaded, you need to use a web server to test your app. A quick way to start a local development server is to use Python's built-in server.

  1. Using a command line, from the directory that contains your index.html file run:

    python -m http.server 8000

  2. In a web browser, go to http://localhost:8000/

    You can also use any other hosted development environment or web server, such as the Apache HTTP Server .

Create a simple video player

First, modify dai.html to create a simple HTML5 video element and a div to use for Ad UI elements. Also add the necessary tags to load the dai.css and dai.js files, as well as to import the hls.js video player.

Then, modify dai.css to specify the size and position of the page elements. Finally, in dai.js , define variables to hold the stream request information and an initPlayer() function to run when the page loads.

The stream request constants are as follows:

  • BACKUP_STREAM : A URL for a backup stream to play in case the ads process encounters a fatal error.

  • STREAM_URL : Only used for livestreams . The video stream URL provided by your manifest manipulator or third-party partner using pod serving. It should require you to insert the stream ID provided by the IMA DAI SDK, before you make a request. In this case, the stream URL includes a placeholder, [[STREAMID]] , which is replaced with the stream ID before making a request.

  • NETWORK_CODE : The network code for your Ad Manager 360 account.

  • CUSTOM_ASSET_KEY : Only used for livestreams . The custom asset key that identifies your pod serving event in Ad Manager 360. This can be created by your manifest manipulator or third-party pod serving partner.

  • API_KEY : Only used for livestreams . An optional API key that can be required to retrieve a stream ID from the 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');
}

Load the IMA DAI SDK

Next, add the DAI framework using a script tag in dai.html , before the tag for dai.js .

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>
...

Initialize the StreamManager and make a live or VOD stream request

Livestream pod serving

In order to request a set of ads, create an ima.dai.api.StreamManager , which is responsible for requesting and managing DAI streams. The constructor takes a video element and the resulting instance takes an ad UI element to handle ad interactions.

Then, define a function to request the pod serving livestream. This function first creates a PodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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 pod serving

In order to request a set of ads, create an ima.dai.api.StreamManager , which is responsible for requesting and managing DAI streams. The constructor takes a video element and the resulting instance takes an ad UI element to handle ad interactions.

Then, define a function to request the pod serving VOD stream. This function first creates a PodVodStreamRequest , configures it with the streamRequest parameters provided in step 2, and then calls streamManager.requestStream() with that request object.

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

Handle stream events

Livestream pod serving

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , 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 loadStream() function.

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 pod serving

Next, implement event listeners for major video events. This example handles the STREAM_INITIALIZED , 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.

In addition, VOD pod serving streams require calling StreamManager.loadStreamMetadata() in response to the to the STREAM_INITIALIZED event. You also need to request a stream URL from your, video technology partner (VTP). Once the loadStreamMetadata() call succeeds it triggers a LOADED event, where you should call a loadStream() function with your stream URL to load and play the stream. 

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

Handle stream metadata

In this step you implement event listeners for metadata to notify the SDK when ad events occur. Listening for in-stream metadata events can vary, depending on the stream format (HLS or DASH), the stream type (Live or VOD stream), your player type, and the type of DAI backend being used. See our Timed Metadata guide for more information.

HLS stream format (Live and VOD streams, HLS.js player)

If you are using an HLS.js player, listen to the HLS.js FRAG_PARSING_METADATA event to get ID3 metadata and pass it to the SDK with StreamManager.processMetadata() .

To automatically play the video after everything is loaded and ready, listen to the HLS.js MANIFEST_PARSED event to trigger playback. 

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 streams format, Live and VOD stream type)

If you are using a DASH.js player, you have to use different strings to listen for ID3 metadata for Live or VOD streams:

  • Livestreams: 'https://developer.apple.com/streaming/emsg-id3'
  • VOD streams: 'urn:google:dai:2018'

Pass the ID3 metadata to the SDK with StreamManager.processMetadata() .

To automatically show the video controls after everything is loaded and ready, listen to the DASH.js MANIFEST_LOADED event. 

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

Shaka Player with livestreams (DASH streams format)

If you are using Shaka player for livestream playback, use the string 'emsg' to listen for metadata events. Then, use the event message data in your call to 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});
}

Shaka Player with VOD streams (DASH streams format)

If you are using Shaka player for VOD stream playback, use the string 'timelineregionenter' to listen for metadata events. Then, use the event message data in your call to StreamManager.processMetadata() with the string '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);
       }
}

Handle player events

Add event listeners to the video element's pause and start events to allow the user to resume playback when the SDK pauses during ad breaks. 

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

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