Video Overlay হল একটি বিশেষ ধরনের লেয়ার, যা ম্যাপের উপর ভিডিও বা অ্যানিমেটেড কন্টেন্ট যোগ করতে ব্যবহৃত হয়। LeafletJS তে ভিডিও লেয়ার যোগ করার জন্য L.videoOverlay() ফাংশন ব্যবহার করা হয়। ভিডিও ওভারলে ব্যবহার করে আপনি ম্যাপে বিভিন্ন ধরনের ভিডিও কনটেন্ট (যেমন, একাধিক ভিডিও ফাইল বা লাইভ স্ট্রিম) একত্রিত করতে পারেন এবং সেটি ম্যাপের নির্দিষ্ট এলাকায় দেখাতে পারেন।
Video Overlay যোগ করা
১. Video Overlay তৈরি করা
Video Overlay যোগ করার জন্য L.videoOverlay(url, bounds, options) ফাংশন ব্যবহার করা হয়। এখানে, url হলো ভিডিও ফাইলের ঠিকানা, bounds হলো ম্যাপের উপর ভিডিওর অবস্থান (নির্দিষ্ট কোণ), এবং options হলো কাস্টমাইজেশন অপশন।
উদাহরণ: Video Overlay যোগ করা
var map = L.map('map').setView([51.505, -0.09], 13);
// OpenStreetMap লেয়ার যোগ করা
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Video Overlay যোগ করা
var videoUrl = 'https://path-to-your-video.mp4'; // ভিডিও ফাইলের URL
var bounds = [[51.49, -0.08], [51.51, -0.06]]; // ভিডিওর অবস্থান (নিচের বাঁকা এবং উপরের ডান কোণ)
var videoOverlay = L.videoOverlay(videoUrl, bounds, {
opacity: 0.7, // ভিডিওর স্বচ্ছতা
zIndex: 1 // স্তরের উচ্চতা (Overlay এর উপর অন্যান্য লেয়ার)
}).addTo(map);
এখানে:
videoUrl: ভিডিও ফাইলের URL।bounds: ভিডিওর অবস্থান বা কোণ, যা ম্যাপের উপর ভিডিওটি কোথায় দেখানো হবে তা নির্ধারণ করে।opacity: ভিডিওর স্বচ্ছতা কাস্টমাইজ করতে ব্যবহৃত হয়।zIndex: ভিডিও লেয়ারটি অন্য লেয়ারের উপরে বা নিচে থাকবে তা নির্ধারণ করে।
Video Overlay এর কাস্টমাইজেশন
২. Video Overlay কাস্টমাইজ করা
LeafletJS এর মাধ্যমে ভিডিও ওভারলে কাস্টমাইজ করতে আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন, যেমন ভিডিওর স্বচ্ছতা, জুম স্তরের নির্ধারণ, এবং লেয়ার লোড করার সময়। এছাড়া ভিডিও অটো প্লে, মিউট বা কনট্রাস্ট কাস্টমাইজ করতে পারবেন।
উদাহরণ: আরও কাস্টম ভিডিও ওভারলে অপশন
var videoOverlay = L.videoOverlay('https://path-to-your-video.mp4', bounds, {
opacity: 0.8, // ভিডিওর স্বচ্ছতা নির্ধারণ
interactive: true, // ভিডিওতে ক্লিক করতে পারবেন কি না
autoplay: true, // ভিডিও স্বয়ংক্রিয়ভাবে চলবে
loop: true, // ভিডিও পুনরায় চলবে
muted: false, // ভিডিও মিউটেড হবে কি না
zIndex: 2 // ভিডিও স্তরের উচ্চতা
}).addTo(map);
এখানে:
interactive:trueহলে ভিডিওতে ক্লিক করার ইন্টারঅ্যাকশন সক্ষম হবে।autoplay:trueহলে ভিডিও শুরু হওয়ার সাথে সাথে প্লে হবে।loop: ভিডিও শেষ হওয়ার পর এটি পুনরায় চলবে।muted:trueহলে ভিডিও মিউট হবে।zIndex: ভিডিওর স্তরের উচ্চতা কাস্টমাইজ করা হয়েছে।
৩. ভিডিও লেয়ার নিয়ন্ত্রণ
ভিডিও লেয়ারটির স্বচ্ছতা বা অবস্থান পরিবর্তন করতে আপনি setOpacity() এবং setBounds() ফাংশন ব্যবহার করতে পারেন।
উদাহরণ: ভিডিও ওভারলে নিয়ন্ত্রণ করা
// ভিডিওর স্বচ্ছতা পরিবর্তন করা
videoOverlay.setOpacity(0.5);
// ভিডিওর অবস্থান পরিবর্তন করা
var newBounds = [[51.47, -0.1], [51.5, -0.05]]; // নতুন কোণ নির্ধারণ
videoOverlay.setBounds(newBounds);
এখানে:
- setOpacity(): ভিডিও লেয়ারের স্বচ্ছতা পরিবর্তন করতে ব্যবহার করা হয়েছে।
- setBounds(): ভিডিওর অবস্থান বা কোণ পরিবর্তন করতে ব্যবহার করা হয়েছে।
৪. ভিডিও লেয়ারকে ম্যাপ থেকে সরানো
যেকোনো সময় আপনি ভিডিও লেয়ারটি ম্যাপ থেকে সরাতে পারবেন remove() ফাংশন ব্যবহার করে।
উদাহরণ: ভিডিও লেয়ার সরানো
videoOverlay.remove(); // ভিডিও ওভারলে ম্যাপ থেকে সরিয়ে ফেলবে
সারাংশ
LeafletJS তে Video Overlay যোগ করা খুবই সহজ এবং এতে আপনি ভিডিও কনটেন্টকে ম্যাপে অ্যাড করতে পারেন। L.videoOverlay() ফাংশন দিয়ে আপনি ভিডিও ফাইলের URL, ভিডিওর অবস্থান (bounds), এবং কাস্টম অপশনগুলো নির্ধারণ করতে পারেন। এর মাধ্যমে আপনি ম্যাপে বিভিন্ন ভিডিও উপস্থাপন করতে পারেন এবং ভিডিওর স্বচ্ছতা, প্লে, লুপ, মিউট, এবং অন্যান্য কাস্টম অপশন নিয়ন্ত্রণ করতে পারেন। Video Overlay ফিচারটি ব্যবহারকারীকে একটি ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় অভিজ্ঞতা দিতে সাহায্য করে, বিশেষ করে যখন আপনি অ্যানিমেশন বা ভিডিও স্ট্রিমিং করতে চান।
Read more
