AMP Video এবং Media Components (amp-video, amp-audio) গাইড ও নোট

AMP Video এবং AMP Audio হল গুগল AMP প্রযুক্তির মধ্যে এমন দুটি উপাদান যা ভিডিও এবং অডিও কন্টেন্ট সাইটে অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়। এগুলি বিশেষভাবে মোবাইল ওয়েব পেজের জন্য ডিজাইন করা হয়েছে যাতে ভিডিও এবং অডিও কন্টেন্ট দ্রুত লোড হতে পারে এবং মোবাইল ডিভাইসে মসৃণ অভিজ্ঞতা প্রদান করতে সাহায্য করে।

AMP Video (amp-video)

amp-video হল একটি AMP কম্পোনেন্ট যা ভিডিও কন্টেন্ট ইন্টিগ্রেট করার জন্য ব্যবহৃত হয়। এটি HTML5 ভিডিও ট্যাগের মতো কাজ করে, কিন্তু কিছু নির্দিষ্ট বিধি এবং অপ্টিমাইজেশন রয়েছে যাতে ভিডিওটি দ্রুত লোড হয় এবং পারফরম্যান্স বৃদ্ধি পায়।

amp-video কম্পোনেন্টের বৈশিষ্ট্য:

• দ্রুত লোডিং: amp-video কম্পোনেন্টের মাধ্যমে ভিডিও কন্টেন্ট দ্রুত লোড হয়, কারণ এটি AMP প্ল্যাটফর্মের মধ্যে সম্পূর্ণভাবে অপ্টিমাইজড।
• Lazy Loading: ভিডিওগুলো Lazy load হয়, অর্থাৎ কেবল তখনই ভিডিওটি লোড হয় যখন ব্যবহারকারী তা দেখার জন্য স্ক্রল করে।
• সমর্থিত ফরম্যাট: এটি ভিডিও ফরম্যাট যেমন MP4, WebM, এবং Ogg ফরম্যাট সমর্থন করে।
• অটো-প্লে, মিউট এবং কন্ট্রোলস: amp-video কম্পোনেন্টে অটো-প্লে, মিউট এবং অন্যান্য ভিডিও কন্ট্রোল অ্যাট্রিবিউট যোগ করা সম্ভব।
• প্লে-ব্যাক কন্ট্রোলস: ভিডিও কন্ট্রোল যেমন প্লে, পজ, থামানো, এবং ভলিউম কন্ট্রোল প্রদর্শিত হতে পারে।
• বিশেষ নকশা: amp-video কম্পোনেন্ট সাধারণত কনটেন্টে একটি নির্দিষ্ট আকারের ভিডিও প্রদান করে, যাতে সাইটের পারফরম্যান্সে কোনো ব্যাঘাত না ঘটে।

amp-video ব্যবহার উদাহরণ:

<amp-video width="640" height="360" layout="responsive" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video.</p>
</amp-video>

এই উদাহরণে:

• width এবং height: ভিডিওর আকার নির্ধারণ করে।
• layout="responsive": ভিডিওকে রেসপন্সিভ মোডে প্রদর্শন করতে ব্যবহৃত।
• controls: ভিডিও কন্ট্রোল (প্লে, পজ, ভলিউম) দেখায়।

AMP Audio (amp-audio)

amp-audio হল একটি AMP কম্পোনেন্ট যা অডিও ফাইল অন্তর্ভুক্ত করার জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের ওয়েব পেজে অডিও কন্টেন্টের অভিজ্ঞতা প্রদান করে, যা বিশেষভাবে দ্রুত লোড হতে এবং মোবাইল ডিভাইসে অপটিমাইজডভাবে কাজ করে।

amp-audio কম্পোনেন্টের বৈশিষ্ট্য:

• দ্রুত লোডিং: amp-audio কম্পোনেন্টের মাধ্যমে অডিও কন্টেন্ট দ্রুত লোড হয়, যা ওয়েবসাইটের দ্রুত পারফরম্যান্সে সহায়তা করে।
• Lazy Loading: অডিও ফাইলগুলো Lazy load হয়, অর্থাৎ ব্যবহারকারী সাইটে স্ক্রল করার পর এটি লোড হতে শুরু করে।
• অডিও ফরম্যাট: এটি MP3, Ogg, এবং WAV ফরম্যাট সমর্থন করে।
• বেসিক কন্ট্রোলস: amp-audio কম্পোনেন্টে সাধারণ অডিও কন্ট্রোল যেমন প্লে, পজ, এবং ভলিউম কন্ট্রোল রয়েছে।
• স্ট্রিমিং: amp-audio স্ট্রিমিং অডিওর জন্য উপযোগী হতে পারে।

amp-audio ব্যবহার উদাহরণ:

<amp-audio width="auto" height="50" controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio.</p>
</amp-audio>

এই উদাহরণে:

• width="auto": অডিও প্লেয়ারটি প্রস্থ অনুযায়ী অটোমেটিক্সি আকার নেবে।
• controls: অডিও কন্ট্রোল (প্লে, পজ, ভলিউম) দেখাবে।

AMP Video এবং Audio এর সুবিধা

1. দ্রুত লোডিং:
   • AMP ভিডিও এবং অডিও উপাদানগুলি বিশেষভাবে অপ্টিমাইজড থাকে যাতে এগুলি দ্রুত লোড হয় এবং মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত হয়।
2. পেজ পারফরম্যান্স:
   • AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি পেজের অন্যান্য উপাদানগুলোর সাথে পারফরম্যান্সে ব্যাঘাত সৃষ্টি না করে ভিডিও এবং অডিও কন্টেন্ট প্রদর্শন করে।
3. Responsive Design:
   • AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি রেসপন্সিভভাবে কাজ করে, অর্থাৎ এগুলি যেকোনো স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।
4. Lazy Loading:
   • AMP ভিডিও এবং অডিও Lazy loading এর মাধ্যমে কেবল তখনই লোড হয় যখন ব্যবহারকারী সেগুলোর দিকে স্ক্রল করে। এটি ওয়েব পেজের লোডিং সময় কমায় এবং প্রাথমিক লোডিং পেজটি দ্রুত করা সম্ভব হয়।
5. SEO Friendly:
   • AMP পেজগুলি গুগলে ভালো র‌্যাঙ্ক পেতে সহায়তা করে, এবং ভিডিও এবং অডিও কন্টেন্টের সঠিক প্রস্থ এবং উচ্চতা নির্ধারণের মাধ্যমে আরো উন্নত পারফরম্যান্স তৈরি করা যায়।

উপসংহার

AMP ভিডিও এবং অডিও কম্পোনেন্টগুলি বিশেষভাবে ডিজাইন করা হয়েছে যাতে মোবাইল ডিভাইসে ভিডিও এবং অডিও কন্টেন্ট দ্রুত এবং অপ্টিমাইজডভাবে লোড হয়। এগুলি ওয়েব পেজের দ্রুত লোডিং এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।