AMP (Accelerated Mobile Pages) প্রযুক্তি ব্যবহার করে ভিডিও এবং মিডিয়া স্ট্রিমিং পেজ তৈরি করা বেশ সহজ, কারণ AMP বিশেষভাবে ডিজাইন করা হয়েছে মোবাইল ডিভাইসে দ্রুত লোড হওয়া পেজ তৈরি করার জন্য। মিডিয়া কন্টেন্ট যেমন ভিডিও, অডিও এবং অন্যান্য ফাইলগুলি দ্রুত লোড এবং রেন্ডার করার জন্য AMP নিজস্ব উপাদান (যেমন <amp-video>, <amp-iframe>) সরবরাহ করে। এই উপাদানগুলো ব্যবহার করে আপনি ভিডিও বা মিডিয়া স্ট্রিমিং পেজ তৈরি করতে পারেন।
এখানে, AMP এর মাধ্যমে ভিডিও এবং মিডিয়া স্ট্রিমিং পেজ তৈরি করার জন্য কিছু স্টেপ দেওয়া হলো:
1. AMP Video Integration
AMP পেজে ভিডিও অন্তর্ভুক্ত করার জন্য amp-video ট্যাগ ব্যবহার করা হয়। এটি AMP পেজে ভিডিও প্লেব্যাক সিস্টেম যুক্ত করার জন্য একটি বিশেষ ট্যাগ। AMP ভিডিও প্লেব্যাকের জন্য mp4, webm, ogv ফরম্যাটগুলি সমর্থিত।
AMP Video Embed Example:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Video Example</title>
</head>
<body>
<h1>AMP Video Example</h1>
<!-- AMP Video Embed -->
<amp-video width="800" height="450" layout="responsive" controls>
<source src="https://www.example.com/video.mp4" type="video/mp4">
<source src="https://www.example.com/video.webm" type="video/webm">
<source src="https://www.example.com/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</amp-video>
</body>
</html>ব্যাখ্যা:
amp-video: ভিডিও প্লেব্যাকের জন্য AMP পেজের একটি বিশেষ ট্যাগ। এটিwidth,height, এবংlayoutঅ্যাট্রিবিউট নিয়ে আসে, যা ভিডিওর আকার এবং প্রতিক্রিয়া (responsive) সেট করতে সাহায্য করে।controls: ভিডিও প্লেব্যাকের জন্য কন্ট্রোল প্যানেল (প্লে, পজ, ভলিউম ইত্যাদি) প্রদর্শন করার জন্য ব্যবহৃত হয়।<source>: ভিডিও ফাইলের উৎস (src) এবং ভিডিও ফরম্যাট উল্লেখ করা হয়, যেমনmp4,webm, বাogv। ব্রাউজারটি প্রথমে সমর্থিত ফরম্যাটটি লোড করবে।
2. AMP Iframe for External Video Streaming
AMP পেজে যদি আপনি অন্য কোনও ভিডিও স্ট্রিমিং প্ল্যাটফর্ম যেমন YouTube বা Vimeo এর ভিডিও এম্বেড করতে চান, তবে amp-iframe ব্যবহার করতে পারেন। এটি AMP পেজে এক্সটার্নাল কন্টেন্ট যেমন ইউটিউব ভিডিও, Vimeo, বা অন্যান্য ওয়েবসাইট থেকে ভিডিও এম্বেড করার জন্য ব্যবহার করা হয়।
AMP Iframe for YouTube Video Example:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP YouTube Embed Example</title>
</head>
<body>
<h1>AMP YouTube Embed Example</h1>
<!-- AMP YouTube Embed -->
<amp-iframe width="800" height="450" layout="responsive" sandbox="allow-scripts allow-same-origin"
src="https://www.youtube.com/embed/dQw4w9WgXcQ">
</amp-iframe>
</body>
</html>ব্যাখ্যা:
amp-iframe: এটি AMP পেজে এক্সটার্নাল ভিডিও বা কন্টেন্ট এম্বেড করার জন্য ব্যবহৃত হয়। এটিwidth,height, এবংlayoutএর মতো অ্যাট্রিবিউট ব্যবহার করে আকার ও প্রতিক্রিয়াশীল ডিজাইন কন্ট্রোল করে।sandbox: নিরাপত্তার জন্য ব্যবহৃত হয়, যাতে আইফ্রেমে যে কন্টেন্ট লোড হয়, সেটি বিশেষ কিছু সীমাবদ্ধতার মধ্যে থাকে (যেমন স্ক্রিপ্ট চালানো, কুকিজ ব্যবহার ইত্যাদি)।src: এম্বেড করা ভিডিওর ইউআরএল দেয়া হয়, যেমন ইউটিউব বা ভিমিওর ভিডিও লিঙ্ক।
3. AMP Audio Integration
AMP পেজে অডিও কন্টেন্ট অন্তর্ভুক্ত করার জন্য amp-audio ট্যাগ ব্যবহার করা হয়। এটি অডিও প্লেব্যাক সিস্টেম সাপোর্ট করে এবং বিভিন্ন ফাইল ফরম্যাট যেমন mp3, ogg, wav ইত্যাদি সাপোর্ট করে।
AMP Audio Example:
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Audio Example</title>
</head>
<body>
<h1>AMP Audio Example</h1>
<!-- AMP Audio Embed -->
<amp-audio width="800" height="50" layout="responsive" controls>
<source src="https://www.example.com/audio.mp3" type="audio/mp3">
<source src="https://www.example.com/audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</amp-audio>
</body>
</html>ব্যাখ্যা:
amp-audio: এটি AMP এর মাধ্যমে অডিও কন্টেন্ট এম্বেড করতে ব্যবহৃত ট্যাগ। এতেcontrolsঅ্যাট্রিবিউট রয়েছে, যা প্লেব্যাক কন্ট্রোলের জন্য ব্যবহৃত হয়।<source>: অডিও ফাইলের উৎস এবং টাইপ নির্ধারণ করে, যেমনmp3,ogg।
4. AMP Media Streaming Integration (Live Streaming)
AMP পেজে লাইভ স্ট্রিমিং মিডিয়া এম্বেড করার জন্য amp-iframe ট্যাগ ব্যবহার করা হয়। যেমন লাইভ ভিডিও স্ট্রিমিং সাইটগুলি (যেমন: YouTube Live, Twitch) এম্বেড করা যেতে পারে।
AMP Iframe for Live Streaming Example (YouTube Live):
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>AMP Live Streaming Example</title>
</head>
<body>
<h1>AMP Live Streaming Example</h1>
<!-- AMP Iframe for YouTube Live -->
<amp-iframe width="800" height="450" layout="responsive" sandbox="allow-scripts allow-same-origin"
src="https://www.youtube.com/embed/live_stream?channel=UC_x5XG1OV2P6uZZ5b7YOIww">
</amp-iframe>
</body>
</html>ব্যাখ্যা:
amp-iframe: লাইভ স্ট্রিমিং ভিডিও বা কন্টেন্ট দেখানোর জন্য এটি ব্যবহার করা হয়। ইউটিউব লাইভ স্ট্রিমের জন্য এটি ব্যবহৃত হয়েছে, তবে আপনি অন্য স্ট্রিমিং সার্ভিসের জন্যও একই পদ্ধতি ব্যবহার করতে পারেন।
উপসংহার:
AMP এর মাধ্যমে ভিডিও এবং মিডিয়া স্ট্রিমিং পেজ তৈরি করা সহজ এবং দ্রুত হয়, কারণ এটি মোবাইল ডিভাইসে দ্রুত লোড এবং রেন্ডারিং নিশ্চিত করে। আপনি amp-video, amp-iframe, এবং amp-audio ট্যাগ ব্যবহার করে AMP পেজে ভিডিও, অডিও এবং লাইভ স্ট্রিমিং কন্টেন্ট এম্বেড করতে পারেন। এটি ব্যবহারকারীদের জন্য একটি দ্রুত, ইন্টারঅ্যাকটিভ এবং মোবাইল-ফ্রেন্ডলি অভিজ্ঞতা প্রদান করে।
Read more
