নিচে ওয়েব পেজে একটি ভিডিও উইন্ডো দেখুন।
এইচটিএমএল ৫.০ সংস্করণের পূর্বে ফ্ল্যাশ প্রোগ্রামের মত প্লাগ-ইন ব্যবহার করে ব্রাউজারে ভিডিও চালানো হতো। কিন্তু বর্তমানে আমরা এইচটিএমএল ৫.০ এর <vedio> ট্যাগ ব্যবহার করে সরাসরি ব্রাউজারের ভিডিও চালাতে পারি।
টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <vedio> এলিমেন্ট সমর্থন বা support করে।
এলিমেন্ট | |||||
---|---|---|---|---|---|
<video> | ৪.০ | ৯.০ | ৩.৫ | ৪.০ | ১০.৫ |
ওয়েব পেজে কোন ভিডিও প্রদর্শন করতে চাইলে এইচটিএমএল ৫ এর <vedio> ট্যাগ ব্যবহার করতে হবে। নিছে ের একটি উদাহরণ দেখুন।
<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> এট্রিবিউটটি ভিডিও চালু করা, বন্ধ করা এবং ভলিউম নিয়ন্ত্রন করার জন্য ব্যবহার করা হয়। সর্বক্ষেত্রে
height এবং width এট্রিবিউট ব্যবহার করা উচিৎ। নয়তো ভিডিও লোড হওয়ার পর
পেজের গঠন বা layout পরিবর্তন হয়ে যাবে।
যে সকল ব্রাউজারে <video> ট্যাগ সমর্থন
করে না,সে সব ব্রাউজারে <video> এবং </video> ট্যাগের মাঝের লেখা বা text প্রদর্শন করবে।
একাধিক <source> এলিমেন্টের মাধ্যমে একাধিক ভিডিও ফাইল যুক্ত করা যায়। ব্রাউজার প্রথমে সাপোর্টেড যে ফর্ম্যাটটি পাবে সেটাই প্রদর্শিত হবে।
autoplay এট্রিবিউট ব্যবহার করে ওয়েব পেজে কোন ভিডিও স্বয়ংক্রিয়ভাবে চালু করা যায়। যে সকল ভিডিও ট্যাগে autoplay এট্রিবিউট ব্যবহার করা হয় সে সকল ভিডিও তে ব্যবহারকারী বা user এর কোনো নিয়ন্ত্রন থাকে না। এক্ষেত্রে ওয়েব পেজ সম্পূর্ণ লোড হওয়ার সাথে সাথে ভিডিওটি স্বয়ংক্রিয়ভাবেই চালু হয়ে যায়। নিচে এর একটি উদাহরণ দেখুন।
<video width="420" height="340" 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 এট্রিবিউট কাজ করে না।
এইচটিএমএল ৫.০ তে, ৩টি ভিডিও ফরম্যাট সমর্থন বা support করে, এগুলো হল - MP4, WebM এবং Ogg.
নিচের টেবিলে দেখুন, বিভিন্ন ব্রাউজারের কোন কোন ভার্সনে কোন কোন ভিডিও ফরম্যাট সমর্থন বা support করে।
ব্রাউজার | MP4 | WebM | Ogg |
---|---|---|---|
Internet Explorer | সমর্থন করে | সমর্থন করে না | সমর্থন করে না |
Chrome | সমর্থন করে | সমর্থন করে | সমর্থন করে |
Firefox | সমর্থন করে | সমর্থন করে | সমর্থন করে |
Safari | সমর্থন করে | সমর্থন করে না | সমর্থন করে না |
Opera | সমর্থন করে ( Opera 25 ভার্সন থেকে) | সমর্থন করে | সমর্থন করে |
ফাইল ফরম্যাট | মিডিয়া টাইপ |
---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
ট্যাগ | বর্ণনা |
---|---|
<video> | কোনো ভিডিও বা চলচ্চিত্র নির্দেশ করে। |
<source> | <video> এবং <audio> ট্যাগের জন্য মিডিয়া ফাইলের লিংক নির্দেশ করে। |
<track> | মিডিয়ার জন্য সাব-টাইটেল অথবা যে কোনো ধরনের লেখা যা পড়ার উপযুক্ত, নির্দেশ করে। |
এইচটিএমএল <vedio> ট্যাগ সম্পর্কে জানতে W3C এর HTML5 Video Events and API ওয়েব পেজটি ব্রাউজ করুন।
এইচটিএমএল <vedio> ট্যাগ সম্পর্কে জানতে Mozilla Developer এর <video>: The Video Embed element ওয়েব পেজটি ব্রাউজ করুন।