অডিও বিজ্ঞাপন পোস্টার ইমেজ

এই নির্দেশিকাটি দেখায় কিভাবে IMA HTML5 SDK ব্যবহার করে আপনার ভিডিও প্লেয়ারকে একটি পোস্টার ইমেজ দিয়ে ওভারলে করতে হয় যখন অডিও বিজ্ঞাপনগুলি চালানো হয়৷ আপনার VAST URL অনুরোধে ad_type=audio_video সেট করা থাকলে এটি ব্যবহার করা উচিত। এটি করার ফলে অডিও এবং ভিডিও বিজ্ঞাপন উভয়ই যোগ্য এবং সম্পূর্ণ পরিবেশিত হওয়ার জন্য উন্নত বিজ্ঞাপন নগদীকরণের অনুমতি দেয়। আরও বিশদ বিবরণের জন্য ভিডিও সামগ্রীতে ad_type ডকুমেন্টেশন এবং অডিও দেখুন।

আপনি এই নির্দেশিকাটি অনুসরণ করতে পারেন, একটি মৌলিক IMA ইন্টিগ্রেশনে পরিবর্তন করতে পারেন, অথবা এই বৈশিষ্ট্যের সাথে সম্পূর্ণ একীকরণের জন্য ভিডিও নমুনা অ্যাপে অডিও দেখতে পারেন।

পূর্বশর্ত

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

পোস্টার ইমেজ বৈশিষ্ট্য সক্রিয় করুন

আপনার অডিও এবং ভিডিও বিজ্ঞাপনের অনুরোধ করার আগে, audioPosterImageEnabled বৈশিষ্ট্যের পতাকাটিকে true এবং audioPosterImageDefaultUrl বৈশিষ্ট্য পতাকাটিকে আপনার ডিফল্ট পোস্টার চিত্র URL-এ সেট করুন৷ AdDisplayContainer তৈরি করার আগে ImaSdkSettings.setFeatureFlags() API দিয়ে এটি করুন। যখন এটি সেট করা হয় এবং একটি অডিও বিজ্ঞাপন চলছে, IMA স্বয়ংক্রিয়ভাবে ভিডিও প্লেয়ারের উপরে বিজ্ঞাপনের সাথে সম্পর্কিত একটি চিত্রকে ওভারলে করে। IMA ভিডিও প্লেয়ারের মধ্যে উপলভ্য বৃহত্তম সহচর বিজ্ঞাপন চিত্র বেছে নেয় এবং ভিডিও প্লেয়ারের থেকে কমপক্ষে 75 px ছোট। যদি বিজ্ঞাপনের VAST-এ এমন কোনো ছবি না থাকে যা IMA ওভারলে হিসেবে ব্যবহার করতে পারে, IMA আপনার নির্দিষ্ট ডিফল্ট ছবিকে ওভারলে হিসেবে ব্যবহার করে।

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}