How to মিউজিক (Embed Music) and Video in HTML | SP Foundationbd

HTML ৫ এ অডিও ভিডিও প্রদর্শনের জন্য নতুন কিছু tag এসেছে ফলে ব্রাউজারে অডিও ভিডিও চালানো এখন খুব সহজ। আগে embed নামের একটি ট্যাগ দিয়ে এই কাজগুলি চালানো হত তবে অনেক সমস্যা ছিল। যেমন embed ট্যাগ কাজ করার জন্য Plugin install থাকতে হত (ব্রাউজারে)। এদের মধ্যে খুব পরিচিত একটি প্লাগিন হচ্ছে ফ্লাশ প্লেয়ার এছাড়া কুইক টাইম, ভিএলসি (VLC), Windows Media Player ইত্যাদি।

সমস্যা হত যদি ইউজারের ব্রাউজারে কোন মিডিয়া প্লেয়ার প্লাগিন ইনস্টল না থাকত। যাই HTML 5 এসব সমস্যার সমাধান নিয়ে এসেছে। যদি এখনও IE (ইন্টারনেট এক্সপ্লোরার) HTML 5 সাপোর্ট করেনা তবে IE এর সর্বশেষ ভার্সনে (IE 9+) এসব সমাধান আসছে।

যেহেতু এখন বেশিরভাগ মানুষই মজিলা বা গুগল ক্রোম ব্রাউজার ব্যবহার করে তাই আমরা HTML 5 এরই উপর ভিত্তি করে tutorial দিচ্ছি।

 

HTML ৫ ব্যবহার করে এখানে mp3 ফাইল বাজিয়ে দেখাচ্ছি এবং এর জন্য কোন plugin লাগবেনা। audio নামের ট্যাগ দিয়ে এটা করা যায়।

<audio controls>

<source src="/media/Duniya_Ke_Ae_Musafir.ogg" type="audio/ogg" />

<source src="/media/Duniya_Ke_Ae_Musafir.mp3" type="audio/mpeg" />

<h1>Your Browser doesn't support audio tag</h1>

</audio>

 

** মজিলাতে mp3  সাপোর্ট করেনা তাই ogg ফরমেটে দিয়েছি তবে google ক্রোমে mp3 টি চলবে।

** দেখুন দটি source ট্যাগ দিয়েছি অথচ একটি দেয়া উচিৎ ছিল বলে ভাবতে পারেন। না আমারটাই ঠিক আছে কেননা ব্রাউজার fallback ফরমেট method ব্যবহার করে দেখে কোন ফরমেট টি সে সাপোর্ট করে। একটার পর একটা চেক করে দেখতে দেখতে যেটা সাপোর্টেড ফরমেট সেটা বাজানো শুরু করবে।

** type এট্রিবিউট টি ঐচ্ছিক তবে দিলে পারফমেন্স বাড়বে।

<audio> এর ভিতরে controls="controls" এভাবে দিতে পারেন অথবা আমি যেভাবে দিয়েছি সেটাও হবে। এটা হচ্ছে pause/play, sound ইত্যাদি প্লেয়ারে দেখাবে কিনা সেটার জন্য। এরপর controls এর মত  autoplay আরেকটা এট্রিবিউট আছে এটা দিলে অটোমেটিক মিউজিক প্লে হবে।

loop নামে একটা এট্রিবিউট আছে এটা দিলে মিউজিকটি একবার শেষ হলে আবার প্রথম থেকে শুরু হবে এভাবে ঘুরে ঘুরে বাজতে থাকবে।

preload নামের আরেকটা attribute আছে audio এলিমেন্টের জন্য এবং এটার ৩ রকম মান দেয়া যায়।

১. auto দিলে পেজ লোড হবার আগেই অডিটি download করবে আগে

২. meta দিলে পেজ লোড হবার সাথে সাথে মেটাডেটা যেমন author ইত্যাদি লোড হবে।

৩. none দিলে মেটাডেটা কিংবা অডিও কোনটাই পেজের আগে লোড হবেনা।

** source ট্যাগটি না দিয়ে যদি audio ট্যাগে src এট্রিবিউট দিয়ে মিডিয়া ফাইলটির উৎস দেখিয়ে দেন তবু হবে।

এখন সমস্যা হল যেহেতু audio ট্যাগ সব ব্রাউজারে সাপোর্ট করেনা তাছাড়া mp3, ogg, wav ছাড়া অন্য ফরমেট চলেনা তাই সব ব্রাউজার কমপিটাবিলাটির জন্য আপাতত embed ট্যাগ ব্যবহার করতে পারেন। তবে এটার জন্য যেকোন মিডিয়া প্লেয়ার আপনার ব্রাউজারে ইনস্টল থাকতে হবে। সাধারনত VLC media player আপনার পিসিতে ইনস্টল থাকলে VLC Web Plugin নামে একটা ছোট্র প্লাগিন আপনার ব্রাউজারে অটোমেটিক ইনস্টল আছে।

<object width="300" height="42" type="audio/mpeg" data="audio/my_music.mp3">

<param name="src" value="/media/Duniya_Ke_Ae_Musafir.mp3" />

<embed src="/media/Duniya_Ke_Ae_Musafir.mp3" width="300" height="42">

</embed>

</object>

ভিডিও (Video)

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

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

1.<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 এলিমেন্টে উপরে ৩টি attribute ব্যবহার করেছি। height এবং width তো দেখেই বোঝা যাচ্ছে এগুলি দিয়ে দৈর্ঘ প্রস্থ ঠিক করে দিয়েছি। poster এট্রিবিউট টি চমৎকার কাজের জিনিস। প্রথমে পিচ্চিটার জিহবা বের করা ছবিটা ভিডিওটির পোস্টার হিসেবে দিয়েছি। poster ব্যবহার করে আপনি ইচ্ছেমত ছবি দিতে পারেন।

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

** ৩টি ভিডিও ফরমেট support করে - 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 কাজ করার জন্য যেকোন ভিডিও প্লেয়ার plugin ব্রাউজারে install থাকতে হয় যেমন vlc web plugin

** সবচেয়ে ভাল হবে যদি আপনি সবগুলি option একসাথে এমনভাবে রাখেন যাতে কোন না কোন একটাতে ইউজারের ব্রাউজার ধরা পরবেই। এজন্য এইচটিএমএল ৫ এবং 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">

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

</embed>

</object>

</video>

এখানে embed এর ভিতর ঐ ফরমেট দিতে হবে যেটা সাধারনত সব ব্রাউজার সাপোর্ট করে যেমন ফ্লাশ দিতে পারেন তবে তার আগে video টি এই ফরমেটে বানিয়ে নিতে হবে।