IMA SDKগুলি আপনার ওয়েবসাইট এবং অ্যাপগুলিতে মাল্টিমিডিয়া বিজ্ঞাপনগুলিকে একীভূত করা সহজ করে তোলে৷ IMA SDK যেকোন VAST-সঙ্গী বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে পারে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক পরিচালনা করতে পারে। IMA DAI SDK-এর সাথে, অ্যাপগুলি বিজ্ঞাপন এবং বিষয়বস্তু ভিডিওর জন্য একটি স্ট্রিম অনুরোধ করে—হয় VOD বা লাইভ সামগ্রী। SDK তারপরে একটি সম্মিলিত ভিডিও স্ট্রিম ফেরত দেয়, যাতে আপনাকে আপনার অ্যাপের মধ্যে বিজ্ঞাপন এবং বিষয়বস্তু ভিডিওর মধ্যে স্যুইচিং পরিচালনা করতে হবে না।
আপনি আগ্রহী DAI সমাধান নির্বাচন করুন
সম্পূর্ণ পরিষেবা DAI
এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন সহ দেখতে বা অনুসরণ করতে চান, GitHub থেকে সহজ উদাহরণটি ডাউনলোড করুন।
IMA DAI ওভারভিউ
IMA DAI SDK বাস্তবায়নে এই নির্দেশিকায় প্রদর্শিত দুটি প্রধান উপাদান জড়িত:
-
StreamRequest— হয় একটিVODStreamRequestবা একটিLiveStreamRequest: একটি বস্তু যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। অনুরোধগুলি একটি বিষয়বস্তু আইডি, সেইসাথে একটি API কী বা প্রমাণীকরণ টোকেন এবং অন্যান্য পরামিতি নির্দিষ্ট করে৷ -
StreamManager: একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।
পূর্বশর্ত
- তিনটি খালি ফাইল
- dai.html
- dai.css
- dai.js
- আপনার কম্পিউটারে পাইথন ইনস্টল করা, বা পরীক্ষার জন্য ব্যবহার করার জন্য একটি ওয়েব সার্ভার
একটি উন্নয়ন সার্ভার শুরু করুন
যেহেতু IMA DAI SDK যে পৃষ্ঠা থেকে এটি লোড করা হয়েছে সেই একই প্রোটোকল ব্যবহার করে নির্ভরতা লোড করে, তাই আপনার অ্যাপটি পরীক্ষা করার জন্য আপনাকে একটি ওয়েব সার্ভার ব্যবহার করতে হবে৷ একটি স্থানীয় উন্নয়ন সার্ভার শুরু করার একটি দ্রুত উপায় হল পাইথনের অন্তর্নির্মিত সার্ভার ব্যবহার করা।
একটি কমান্ড লাইন ব্যবহার করে, যে ডিরেক্টরিতে আপনার
index.htmlফাইল রয়েছে তা থেকে রান করুন:python -m http.server 8000একটি ওয়েব ব্রাউজারে,
http://localhost:8000/এ যানআপনি অন্য কোনো ওয়েব সার্ভারও ব্যবহার করতে পারেন, যেমন Apache HTTP সার্ভার ।
একটি সাধারণ ভিডিও প্লেয়ার তৈরি করুন
প্রথমে, একটি সাধারণ HTML5 ভিডিও উপাদান তৈরি করতে dai.html পরিবর্তন করুন এবং ক্লিকথ্রুতে ব্যবহার করার জন্য একটি div তৈরি করুন৷ এছাড়াও dai.css এবং dai.js ফাইল লোড করতে, সেইসাথে hls.js ভিডিও প্লেয়ার আমদানি করতে প্রয়োজনীয় ট্যাগ যোগ করুন। তারপর, পৃষ্ঠা উপাদানগুলির আকার এবং অবস্থান নির্দিষ্ট করতে dai.css পরিবর্তন করুন৷ অবশেষে, dai.js- এ, স্ট্রীম অনুরোধের তথ্য ধরে রাখার জন্য ভেরিয়েবল এবং পৃষ্ঠা লোড হওয়ার সময় একটি initPlayer() ফাংশন সংজ্ঞায়িত করুন।
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
IMA DAI SDK লোড করুন
এরপর, dai.js- এর ট্যাগের আগে dai.html এ একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করে IMA ফ্রেমওয়ার্ক যোগ করুন।
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
স্ট্রিম ম্যানেজার শুরু করুন এবং একটি স্ট্রিম অনুরোধ করুন
বিজ্ঞাপনের একটি সেটের জন্য অনুরোধ করার জন্য, একটি ima.dai.api.StreamManager তৈরি করুন, যা DAI স্ট্রীমগুলির অনুরোধ এবং পরিচালনার জন্য দায়ী৷ কনস্ট্রাক্টর একটি ভিডিও উপাদান নেয় এবং এর ফলে বিজ্ঞাপন ক্লিকগুলি পরিচালনা করার জন্য একটি বিজ্ঞাপন UI উপাদান লাগে৷
তারপর, স্ট্রীম অনুরোধ যে ফাংশন সংজ্ঞায়িত. এই উদাহরণে VOD এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপর streamRequest প্যারামিটার সহ streamManager.requestStream() কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে একটি হ্যান্ডলার যোগ করতে হবে যাতে সময়মতো মেটাডেটা ইভেন্টগুলি শোনা যায় এবং ইভেন্টগুলিকে StreamManager এ ফরওয়ার্ড করতে হয়। আপনি আপনার ব্যবহারের ক্ষেত্রে মানানসই কোড মন্তব্য বা মন্তব্য করতে পারেন. উভয় পদ্ধতি একটি ঐচ্ছিক API কী নেয়। আপনি যদি একটি সুরক্ষিত স্ট্রীম ব্যবহার করেন, তাহলে আপনাকে একটি DAI প্রমাণীকরণ কী তৈরি করতে হবে।
এই উদাহরণের কোনো স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয় না।
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// 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-এর সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই IMA DAI SDK-তে লাইভস্ট্রিমের জন্য ID3 ইভেন্ট পাস করতে হবে, যেমনটি নমুনা কোডে দেখানো হয়েছে।
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
তাই তো! আপনি এখন অনুরোধ করছেন এবং IMA DAI SDK-এর সাথে বিজ্ঞাপন প্রদর্শন করছেন৷ আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, GitHub-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।
,IMA SDKগুলি আপনার ওয়েবসাইট এবং অ্যাপগুলিতে মাল্টিমিডিয়া বিজ্ঞাপনগুলিকে একীভূত করা সহজ করে তোলে৷ IMA SDK যেকোন VAST-সঙ্গী বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে পারে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক পরিচালনা করতে পারে। IMA DAI SDK-এর সাথে, অ্যাপগুলি বিজ্ঞাপন এবং বিষয়বস্তু ভিডিওর জন্য একটি স্ট্রিম অনুরোধ করে—হয় VOD বা লাইভ সামগ্রী। SDK তারপরে একটি সম্মিলিত ভিডিও স্ট্রিম ফেরত দেয়, যাতে আপনাকে আপনার অ্যাপের মধ্যে বিজ্ঞাপন এবং বিষয়বস্তু ভিডিওর মধ্যে স্যুইচিং পরিচালনা করতে হবে না।
আপনি আগ্রহী DAI সমাধান নির্বাচন করুন
সম্পূর্ণ পরিষেবা DAI
এই নির্দেশিকাটি দেখায় কিভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে IMA DAI SDK সংহত করা যায়। আপনি যদি একটি সম্পূর্ণ নমুনা ইন্টিগ্রেশন সহ দেখতে বা অনুসরণ করতে চান, GitHub থেকে সহজ উদাহরণটি ডাউনলোড করুন।
IMA DAI ওভারভিউ
IMA DAI SDK বাস্তবায়নে এই নির্দেশিকায় প্রদর্শিত দুটি প্রধান উপাদান জড়িত:
-
StreamRequest— হয় একটিVODStreamRequestবা একটিLiveStreamRequest: একটি বস্তু যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিম অনুরোধ ভিডিও-অন-ডিমান্ড বা লাইভ স্ট্রিমের জন্য হতে পারে। অনুরোধগুলি একটি বিষয়বস্তু আইডি, সেইসাথে একটি API কী বা প্রমাণীকরণ টোকেন এবং অন্যান্য পরামিতি নির্দিষ্ট করে৷ -
StreamManager: একটি বস্তু যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রীম এবং DAI ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিং এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছে পরিচালনা করে।
পূর্বশর্ত
- তিনটি খালি ফাইল
- dai.html
- dai.css
- dai.js
- আপনার কম্পিউটারে পাইথন ইনস্টল করা, বা পরীক্ষার জন্য ব্যবহার করার জন্য একটি ওয়েব সার্ভার
একটি উন্নয়ন সার্ভার শুরু করুন
যেহেতু IMA DAI SDK যে পৃষ্ঠা থেকে এটি লোড করা হয়েছে সেই একই প্রোটোকল ব্যবহার করে নির্ভরতা লোড করে, তাই আপনার অ্যাপটি পরীক্ষা করার জন্য আপনাকে একটি ওয়েব সার্ভার ব্যবহার করতে হবে৷ একটি স্থানীয় উন্নয়ন সার্ভার শুরু করার একটি দ্রুত উপায় হল পাইথনের অন্তর্নির্মিত সার্ভার ব্যবহার করা।
একটি কমান্ড লাইন ব্যবহার করে, যে ডিরেক্টরিতে আপনার
index.htmlফাইল রয়েছে তা থেকে রান করুন:python -m http.server 8000একটি ওয়েব ব্রাউজারে,
http://localhost:8000/এ যানআপনি অন্য কোনো ওয়েব সার্ভারও ব্যবহার করতে পারেন, যেমন Apache HTTP সার্ভার ।
একটি সাধারণ ভিডিও প্লেয়ার তৈরি করুন
প্রথমে, একটি সাধারণ HTML5 ভিডিও উপাদান তৈরি করতে dai.html পরিবর্তন করুন এবং ক্লিকথ্রুতে ব্যবহার করার জন্য একটি div তৈরি করুন৷ এছাড়াও dai.css এবং dai.js ফাইল লোড করতে, সেইসাথে hls.js ভিডিও প্লেয়ার আমদানি করতে প্রয়োজনীয় ট্যাগ যোগ করুন। তারপর, পৃষ্ঠা উপাদানগুলির আকার এবং অবস্থান নির্দিষ্ট করতে dai.css পরিবর্তন করুন৷ অবশেষে, dai.js- এ, স্ট্রীম অনুরোধের তথ্য ধরে রাখার জন্য ভেরিয়েবলের সংজ্ঞা দিন এবং পৃষ্ঠাটি লোড হলে চালানোর জন্য একটি initPlayer() ফাংশন।
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
IMA DAI SDK লোড করুন
এরপর, dai.js- এর ট্যাগের আগে dai.html এ একটি স্ক্রিপ্ট ট্যাগ ব্যবহার করে IMA ফ্রেমওয়ার্ক যোগ করুন।
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
স্ট্রিম ম্যানেজার শুরু করুন এবং একটি স্ট্রিম অনুরোধ করুন
বিজ্ঞাপনের একটি সেটের জন্য অনুরোধ করার জন্য, একটি ima.dai.api.StreamManager তৈরি করুন, যা DAI স্ট্রীমগুলির অনুরোধ ও পরিচালনার জন্য দায়ী৷ কনস্ট্রাক্টর একটি ভিডিও উপাদান নেয় এবং এর ফলে বিজ্ঞাপন ক্লিকগুলি পরিচালনা করার জন্য একটি বিজ্ঞাপন UI উপাদান লাগে৷
তারপর, স্ট্রীম অনুরোধ যে ফাংশন সংজ্ঞায়িত. এই উদাহরণে VOD এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপর streamRequest প্যারামিটার সহ streamManager.requestStream() কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে একটি হ্যান্ডলার যোগ করতে হবে যাতে সময়মতো মেটাডেটা ইভেন্টগুলি শোনা যায় এবং ইভেন্টগুলিকে StreamManager এ ফরওয়ার্ড করতে হয়। আপনি আপনার ব্যবহারের ক্ষেত্রে মানানসই কোড মন্তব্য বা মন্তব্য করতে পারেন. উভয় পদ্ধতি একটি ঐচ্ছিক API কী নেয়। আপনি যদি একটি সুরক্ষিত স্ট্রীম ব্যবহার করেন, তাহলে আপনাকে একটি DAI প্রমাণীকরণ কী তৈরি করতে হবে।
এই উদাহরণের কোনো স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহার করা হয় না।
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// 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-এর সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই IMA DAI SDK-তে লাইভস্ট্রিমের জন্য ID3 ইভেন্ট পাস করতে হবে, যেমনটি নমুনা কোডে দেখানো হয়েছে।
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
তাই তো! আপনি এখন অনুরোধ করছেন এবং IMA DAI SDK-এর সাথে বিজ্ঞাপন প্রদর্শন করছেন৷ আরও উন্নত SDK বৈশিষ্ট্য সম্পর্কে জানতে, GitHub-এ অন্যান্য গাইড বা নমুনাগুলি দেখুন।
,আইএমএ এসডিকে আপনার ওয়েবসাইট এবং অ্যাপ্লিকেশনগুলিতে মাল্টিমিডিয়া বিজ্ঞাপনগুলি সংহত করা সহজ করে তোলে। IMA SDK যেকোন VAST-সঙ্গী বিজ্ঞাপন সার্ভার থেকে বিজ্ঞাপনের অনুরোধ করতে পারে এবং আপনার অ্যাপে বিজ্ঞাপন প্লেব্যাক পরিচালনা করতে পারে। আইএমএ ডাই এসডিকেএস সহ, অ্যাপ্লিকেশনগুলি বিজ্ঞাপন এবং সামগ্রী ভিডিওর জন্য একটি স্ট্রিম অনুরোধ করে - হয় ভিওডি বা লাইভ সামগ্রী। এরপরে এসডিকে একটি সম্মিলিত ভিডিও স্ট্রিমটি ফেরত দেয়, যাতে আপনাকে আপনার অ্যাপের মধ্যে বিজ্ঞাপন এবং সামগ্রী ভিডিওর মধ্যে স্যুইচিং পরিচালনা করতে না হয়।
আপনার আগ্রহী DAI সমাধানটি নির্বাচন করুন
সম্পূর্ণ পরিষেবা ডাই
এই গাইডটি কীভাবে একটি সাধারণ ভিডিও প্লেয়ার অ্যাপে আইএমএ ডাই এসডিকে সংহত করতে পারে তা প্রদর্শন করে। আপনি যদি একটি সম্পূর্ণ নমুনা সংহতকরণের সাথে দেখতে বা অনুসরণ করতে চান তবে গিথুব থেকে সাধারণ উদাহরণটি ডাউনলোড করুন।
আইএমএ ডাই ওভারভিউ
আইএমএ ডাই এসডিকে বাস্তবায়নে এই গাইডটিতে প্রদর্শিত দুটি প্রধান উপাদান জড়িত:
-
StreamRequest- হয় একটিVODStreamRequestবা একটিLiveStreamRequest: একটি অবজেক্ট যা একটি স্ট্রিম অনুরোধকে সংজ্ঞায়িত করে। স্ট্রিমের অনুরোধগুলি হয় ভিডিও-অন-চাহিদা বা লাইভ স্ট্রিমের জন্য হতে পারে। অনুরোধগুলি একটি সামগ্রী আইডি নির্দিষ্ট করে, পাশাপাশি একটি এপিআই কী বা প্রমাণীকরণ টোকেন এবং অন্যান্য পরামিতি। -
StreamManager: একটি অবজেক্ট যা গতিশীল বিজ্ঞাপন সন্নিবেশ স্ট্রিম এবং ডিএআই ব্যাকএন্ডের সাথে মিথস্ক্রিয়া পরিচালনা করে। স্ট্রিম ম্যানেজার ট্র্যাকিং পিংস এবং ফরোয়ার্ড স্ট্রিম এবং বিজ্ঞাপন ইভেন্টগুলি প্রকাশকের কাছেও পরিচালনা করে।
পূর্বশর্ত
- তিনটি খালি ফাইল
- dai.html
- dai.css
- dai.js
- পাইথন আপনার কম্পিউটারে ইনস্টল করা হয়েছে, বা পরীক্ষার জন্য ব্যবহারের জন্য একটি ওয়েব সার্ভার
একটি উন্নয়ন সার্ভার শুরু করুন
যেহেতু আইএমএ ডাই এসডিকে নির্ভরতাগুলি লোড করে একই প্রোটোকলটি ব্যবহার করে এটি যে পৃষ্ঠা থেকে লোড হয়েছে, তাই আপনার অ্যাপ্লিকেশনটি পরীক্ষা করার জন্য আপনাকে একটি ওয়েব সার্ভার ব্যবহার করতে হবে। স্থানীয় বিকাশ সার্ভার শুরু করার একটি দ্রুত উপায় হ'ল পাইথনের অন্তর্নির্মিত সার্ভারটি ব্যবহার করা।
কমান্ড লাইন ব্যবহার করে, ডিরেক্টরি থেকে আপনার
index.htmlফাইল রান রয়েছে:python -m http.server 8000একটি ওয়েব ব্রাউজারে,
http://localhost:8000/এ যানআপনি অন্য কোনও ওয়েব সার্ভার যেমন অ্যাপাচি এইচটিটিপি সার্ভারও ব্যবহার করতে পারেন।
একটি সাধারণ ভিডিও প্লেয়ার তৈরি করুন
প্রথমত, ক্লিকথ্রুটির জন্য ব্যবহার করার জন্য একটি সাধারণ এইচটিএমএল 5 ভিডিও উপাদান এবং একটি ডিভ তৈরি করতে DAI.HTML পরিবর্তন করুন। DAI.CSS এবং DAI.JS ফাইলগুলি লোড করার পাশাপাশি hls.js ভিডিও প্লেয়ার আমদানি করতে প্রয়োজনীয় ট্যাগগুলি যুক্ত করুন। তারপরে, পৃষ্ঠার উপাদানগুলির আকার এবং অবস্থান নির্দিষ্ট করতে Dai.css সংশোধন করুন। অবশেষে, dai.js এ, পৃষ্ঠাটি লোড হওয়ার পরে চালানোর জন্য স্ট্রিম অনুরোধের তথ্য এবং একটি initPlayer() ফাংশনটি ধরে রাখতে ভেরিয়েবলগুলি সংজ্ঞায়িত করুন।
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
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 তৈরি করুন, যা ডিএআই স্ট্রিমগুলির অনুরোধ এবং পরিচালনার জন্য দায়বদ্ধ। কনস্ট্রাক্টর একটি ভিডিও উপাদান নেয় এবং ফলস্বরূপ উদাহরণটি বিজ্ঞাপন ক্লিকগুলি পরিচালনা করতে একটি বিজ্ঞাপন ইউআই উপাদান নেয়।
তারপরে, ফাংশনগুলি সংজ্ঞায়িত করুন যা স্ট্রিমগুলি অনুরোধ করে। এই উদাহরণে ভিওডি এবং লাইভস্ট্রিম উভয়ের জন্য ফাংশন অন্তর্ভুক্ত রয়েছে, যা যথাক্রমে VODStreamRequest এবং LiveStreamRequest এর উদাহরণ তৈরি করে এবং তারপরে streamManager.requestStream() streamRequest প্যারামিটারগুলির সাথে কল করে। লাইভস্ট্রিমগুলির জন্য, আপনাকে সময়সীমার মেটাডেটা ইভেন্টগুলি শোনার জন্য এবং ইভেন্টগুলি StreamManager কাছে ফরোয়ার্ড করার জন্য একটি হ্যান্ডলার যুক্ত করতে হবে। আপনার ব্যবহারের ক্ষেত্রে ফিট করার জন্য আপনি কোডটি মন্তব্য করতে বা আপত্তি করতে পারেন। উভয় পদ্ধতি একটি al চ্ছিক এপিআই কী গ্রহণ করে। আপনি যদি কোনও সুরক্ষিত স্ট্রিম ব্যবহার করছেন তবে আপনাকে একটি ডিএআই প্রমাণীকরণ কী তৈরি করতে হবে।
এই উদাহরণে কোনও স্ট্রিম সুরক্ষিত নয়, তাই apiKey ব্যবহৃত হয় না।
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// 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);
}
স্ট্রিম ইভেন্টগুলি হ্যান্ডেল করুন
অবশেষে, আপনাকে বড় ভিডিও ইভেন্টগুলির জন্য ইভেন্ট শ্রোতাদের প্রয়োগ করতে হবে। এই সাধারণ উদাহরণটি LOADED , ERROR , AD_BREAK_STARTED এবং AD_BREAK_ENDED ইভেন্টগুলি onStreamEvent() ফাংশনটি কল করে পরিচালনা করে। এই ফাংশনটি স্ট্রিম লোডিং এবং ত্রুটিগুলি পরিচালনা করে, পাশাপাশি কোনও বিজ্ঞাপন বাজানোর সময় প্লেয়ার নিয়ন্ত্রণগুলি অক্ষম করে, যা এসডিকে দ্বারা প্রয়োজনীয়। স্ট্রিমটি লোড হয়ে গেলে, ভিডিও প্লেয়ারটি loadUrl() ফাংশন ব্যবহার করে সরবরাহিত ইউআরএল লোড করে এবং বাজায়।
আপনি যখন বিজ্ঞাপন বিরতির সময় আইএমএ বিরতি দেয় তখন ব্যবহারকারীকে প্লেব্যাক পুনরায় শুরু করার অনুমতি দেওয়ার জন্য আপনি ভিডিও এলিমেন্টের pause জন্য ইভেন্ট শ্রোতাদের সেট আপ করতে এবং ইভেন্টগুলি start চাইতে পারেন।
ডিএআইয়ের সাথে কাজ করার জন্য, আপনার কাস্টম প্লেয়ারকে অবশ্যই নমুনা কোডে দেখানো হিসাবে আইএমএ ডিএআই এসডিকে লাইভস্ট্রিমের জন্য আইডি 3 ইভেন্টগুলি পাস করতে হবে।
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
তাই তো! আপনি এখন আইএমএ ডাই এসডিকে দিয়ে বিজ্ঞাপনগুলি অনুরোধ করছেন এবং প্রদর্শন করছেন। আরও উন্নত এসডিকে বৈশিষ্ট্যগুলি সম্পর্কে জানতে, গিটহাবের অন্যান্য গাইড বা নমুনাগুলি দেখুন।
,IMA 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
Full service DAI
This guide demonstrates how to integrate the IMA DAI SDK into a simple video player app. If you would like to view or follow along with a completed sample integration, download the simple example from GitHub.
IMA DAI overview
Implementing the IMA DAI SDK involves two main components as demonstrated in this guide:
-
StreamRequest— either aVODStreamRequestor aLiveStreamRequest: An object that defines a stream request. Stream requests can either be for video-on-demand or live streams. Requests specify a content ID, as well as an API key or authentication token and other parameters. -
StreamManager: An object that handles dynamic ad insertion streams and interactions with the DAI backend. The stream manager also handles tracking pings and forwards stream and ad events to the publisher.
পূর্বশর্ত
- Three empty files
- dai.html
- dai.css
- dai.js
- Python installed on your computer, or a web server to use for testing
একটি উন্নয়ন সার্ভার শুরু করুন
Since the IMA DAI 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.
Using a command line, from the directory that contains your
index.htmlfile run:python -m http.server 8000In a web browser, go to to
http://localhost:8000/You can also use any other 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 the clickthrough. 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.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
Load the IMA DAI SDK
Next, add the IMA 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 stream request
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 clicks.
Then, define functions that request streams. This example includes functions for both VOD and livestreams, which create instances of VODStreamRequest and LiveStreamRequest , respectively, and then call streamManager.requestStream() with the streamRequest parameters. For livestreams, you also need to add a handler to listen to timed metadata events and forward the events to the StreamManager . You can comment or uncomment the code to fit your use case. Both methods take an optional API key. If you're using a protected stream, you need to create a DAI authentication key .
Neither stream in this example is protected, so apiKey is not used.
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);
}
Handle stream events
Finally, you need to implement event listeners for major video events. This simple example handles the LOADED , ERROR , AD_BREAK_STARTED and AD_BREAK_ENDED events by calling an onStreamEvent() function. This function handles stream loading and errors, as well as disabling the player controls while an ad is playing, which is required by the SDK. When the stream is loaded, the video player loads and plays the provided URL using a loadUrl() function.
You might also want to set up event listeners for the video element's pause and start events to allow the user to resume playback when the IMA pauses during ad breaks.
To work with DAI, your custom player must pass ID3 events for livestreams to the IMA DAI SDKs as shown in the sample code.
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
streamManager.addEventListener(
[google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
onStreamEvent,
false);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
তাই তো! You're now requesting and displaying ads with the IMA DAI SDK. To learn about more advanced SDK features, see the other guides or the samples on GitHub .