এইচটিএমএল ভিডিও - HTML5 Vedio


নিচে ওয়েব পেজে একটি ভিডিও উইন্ডো দেখুন।




এইচটিএমএল ৫ এ ভিডিও চালানো

এইচটিএমএল ৫.০ সংস্করণের পূর্বে ফ্ল্যাশ প্রোগ্রামের মত প্লাগ-ইন ব্যবহার করে ব্রাউজারে ভিডিও চালানো হতো। কিন্তু বর্তমানে আমরা এইচটিএমএল ৫.০ এর <vedio> ট্যাগ ব্যবহার করে সরাসরি ব্রাউজারের ভিডিও চালাতে পারি।


ব্রাউজার সাপোর্ট

টেবিলে প্রদর্শিত সংখ্যাগুলো ব্রাউজারের প্রথম ভার্সন নির্দেশ করে যেগুলো সম্পূর্ণ ভাবে <vedio> এলিমেন্ট সমর্থন বা support করে।

এলিমেন্ট
<video> ৪.০৯.০৩.৫৪.০১০.৫


এইচটিএমএল <vedio> ট্যাগ

ওয়েব পেজে কোন ভিডিও প্রদর্শন করতে চাইলে এইচটিএমএল ৫ এর <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 এট্রিবিউট ব্যবহার করে ওয়েব পেজে কোন ভিডিও স্বয়ংক্রিয়ভাবে চালু করা যায়। যে সকল ভিডিও ট্যাগে 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 করে।

ব্রাউজারMP4WebMOgg
Internet Explorerসমর্থন করেসমর্থন করে নাসমর্থন করে না
Chromeসমর্থন করেসমর্থন করেসমর্থন করে
Firefoxসমর্থন করেসমর্থন করেসমর্থন করে
Safariসমর্থন করেসমর্থন করে নাসমর্থন করে না
Operaসমর্থন করে ( Opera 25 ভার্সন থেকে)সমর্থন করেসমর্থন করে


এইচটিএমএল ভিডিও - মিডিয়া টাইপ

ফাইল ফরম্যাটমিডিয়া টাইপ
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg


এইচটিএমএল ভিডিও ট্যাগ

ট্যাগবর্ণনা
<video>কোনো ভিডিও বা চলচ্চিত্র নির্দেশ করে।
<source><video> এবং <audio> ট্যাগের জন্য মিডিয়া ফাইলের লিংক নির্দেশ করে।
<track>মিডিয়ার জন্য সাব-টাইটেল অথবা যে কোনো ধরনের লেখা যা পড়ার উপযুক্ত, নির্দেশ করে।

এইচটিএমএল <vedio> ট্যাগ সম্পর্কে জানতে W3C এর HTML5 Video Events and API ওয়েব পেজটি ব্রাউজ করুন।

এইচটিএমএল <vedio> ট্যাগ সম্পর্কে জানতে Mozilla Developer এর <video>: The Video Embed element ওয়েব পেজটি ব্রাউজ করুন।