X

X

X

HTML5 এ ভিডিও উপস্থাপণ



HTML এ ভিডিও

HTML5 এর আগে ব্রাউজারে ভিডিও প্লে করার জন্য প্লাগইন ব্যবহার করতে হতো। যেমন, flash plugin ।
HTML5 <video> ইলামেন্ট দিয়ে সঠিকভাবে ওয়েবপেজে ভিডিও প্লে করা যায়।


Browser সাপোর্ট

নিচে সাপোর্টেড ব্রাউজারের লিস্ট উল্লেখ্য করা হলো:

Element
<video> 4.0 9.0 3.5 4.0 10.5

HTML <video> ইলামেন্ট

 <video> ‌ইলামেন্ট দিয়ে ভিডিও উপস্থাপণ করা যায়:

Code Example

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


কিভাবে এটি কাজ করে

controls attribute দিয়ে video control সমূহ যেমন, play, pause, এবং volume ইত্যাদি যুক্ত করা হয়।

সবসময় width এবং height attribute যুক্ত করা ভালো। যদি এগুলো যুক্ত করা না হয়, তবে পেজ লোড হওয়ার সময় পেজটি সঠিকভাবে প্রদর্শিত নাও হতে পারে।

<source> ইলামেন্ট দিয়ে বিকল্প সোর্স সেট করা হয়। প্রথমে যে ফাইলটি সমর্থিত বা সাপোর্টেড হবে সেটি ব্রাউজার প্লে করবে।

যদি <video> এবং </video> ইলামেন্ট কোনো ব্রাউজারে সাপোর্ট না করে তবে সেক্ষেত্রে এর মধ্যকার টেক্সট ব্রাউজারে বিকল্প হিসেবে উপস্থাপিত হবে।


HTML <video> Autoplay (স্বয়ংক্রিয়ভাবে ভিডিও প্লে করণ)

কোনো ভিডিওকে স্বয়ংক্রিয়ভাবে চালু করার জন্য autoplay attribute ব্যবহার করতে হবে:

Code Example

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

মোবাইল ডিভাইস যেমন iPad এবং iPhone এ autoplay attribute কাজ করবে না।


HTML Video – Browser সাপোর্ট

HTML5 এ তিন ধরণের ভিডিও ফরম্যাট সাপোর্ট করে। যেমন- MP4, WebM, এবং Ogg ।

বিভিন্ন ব্রাউজারে সাপোর্টেড ভিডিও ফরম্যাটগুলো নিচে উল্লেখ্য করা হলো:

Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

HTML Video – Media -এর ধরণ

File Format Media Type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video – Method, Propertiy, এবং Event সমূহ

HTML5 দিয়ে DOM method, property, এবং event গুলো বর্ণনা করা হয়।

এটি দিয়ে ভিডিও লোড, চালু , স্থগিত করা যায়।

উদাহরণ: জাভাস্ক্রিপ্ট দিয়ে ভিডিও প্লে করার নিয়ম

Video courtesy of Big Buck Bunny.

নিজে নিজে চেষ্টা করুন »


HTML5 Video Tag সমূহ

ট্যাগ বর্ণনা
<video> video অথবা movie ডিফাইন করা হয়।
<source> একাধিক মিডিয়া রিসোর্স সেট করা হয় যেমন, <video> এবং <audio>
<track> মিডিয়া প্লেয়ারে টেক্সট ট্র্যাক যুক্ত করা হয়।