এইচটিএমএল বাংলা টিউটোরিয়াল পর্ব ২০ – ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla)

Posted by: POPULAR HOST BD April 13, 2019 in এইচটিএমএল

audio ট্যাগের মত video নামে একটা ট্যাগ আছে এইচটিএমএল ৫ এ। এটা ভিডিও ওয়েব পেজে প্রদর্শনের জন্য। কোন প্লাগিন লাগেনা খুব সহজ। <img ট্যাগ দিয়ে ছবি দেখানোর মত। তবে audio ট্যাগের মতই video ট্যাগও ইন্টারনেট এক্সপ্লোরারে (IE 9 এর নিচে) সাপোর্ট করেনা।

এক লাইন কোড লিখেই ভিডিও পেজে দেখাতে পারেন যেমন

<video src="/media/can_you_say_apple.mp4" controls></video>

অনলাইন এডিটরে দিয়ে দেখুন, ভিডিও চলে আসছে। তবে এখানে বেশ কিছু এট্রিবিউট ব্যবহার করা যায় যেগুলি দিয়ে ভিডিও প্লেয়ার ভালই সাজানো যায়।

source ট্যাগ এখানেও ব্যবহার করতে পারেন, উপকার আগের টিউটোরিয়ালে যেটা বললাম সেটাই। ব্রাউজার ফরমেট চেক করে এবং সাপোর্ট না করলে পরেরটাতে যায় এভাবে যতগুলি source ট্যাগ থাকবে সব চেক করবে।

<video controls height="300" width="410" poster="/media/title_pic.png">

<source src="/media/Can you say banana.webm"

type='video/webm;codecs="vp8, vorbis"'/>

<source src="/media/can_you_say_apple.mp4"

type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

<h1>Your browser doesn't support video tag</h1>

</video>

video এলিমেন্টে উপরে ৩টি এট্রিবিউট ব্যবহার করেছি। height এবং width তো দেখেই বোঝা যাচ্ছে এগুলি দিয়ে দৈর্ঘ প্রস্থ ঠিক করে দিয়েছি। poster এট্রিবিউট টি চমৎকার কাজের জিনিস। প্রথমে পিচ্চিটার জিহবা বের করা ছবিটা ভিডিওটির পোস্টার হিসেবে দিয়েছি। poster ব্যবহার করে আপনি ইচ্ছেমত ছবি দিতে পারেন।

এছাড়া muted নামে আরেকটা এট্রিবিউট আছে এটা দিলে (শুধু controls যেভাবে লিখেছি সেভাবে দিলেই হবে) শব্দ শোনা যাবেনা। বাকি সব এট্রিবিউটগুলি আগের টিউটোরিয়ালের মত।

** ৩টি ভিডিও ফরমেট সাপোর্ট করে – webm, ogg আর mp4

এখানেও embed এবং object ট্যাগ ব্যবহার করে ভিডিও দেখাতে পারেন যদি সব ব্রাউজারে দেখানো প্রয়োজন হয় যেমন

<object width="300" height="200" type="video/webm" data="/media/Can you say banana.webm">

<embed src="/media/Can you say banana.webm" width="300" height="200">

</embed>

</object>

অনলাইন এডিটরে দিয়ে দেখুন

embed কাজ করার জন্য যেকোন ভিডিও প্লেয়ার প্লাগিন ব্রাউজারে ইনস্টল থাকতে হয় যেমন vlc web plugin

** সবচেয়ে ভাল হবে যদি আপনি সবগুলি অপশন একসাথে এমনভাবে রাখেন যাতে কোন না কোন একটাতে ইউজারের ব্রাউজার ধরা পরবেই। এজন্য এইচটিএমএল ৫ এবং embed একসাথে রাখুন ফলে HTML 5 সাপোর্ট না করলে embed ট্যাগ কাজ করবে।

<video controls height="300" width="410" poster="/media/title_pic.png" autoplay>

<source src="/media/Can you say banana.webm"

type='video/webm;codecs="vp8, vorbis"'/>

<source src="/media/can_you_say_apple.mp4"

type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

<object width="300" height="410" type="video/webm" data="/media/Can you say banana.webm">