একজন দক্ষ ফ্রিল্যান্সার গড়ার লক্ষে দেশে এই প্রথম জাগোরিক নিয়ে এসেছে বাংলা এইচটিএমএল টিউটোরিয়াল আর্টিকেল যার এই পর্বে থাকছে এইচটিএমএল মিউজিক ও ভিডিও সম্পর্কে বিস্তারিত।
এটি হচ্ছে বাংলা এইচটিএমএল টিউটোরিয়াল Part-9 এরই ধারাবাহিকতায় আমরা HTML এর সম্পূর্ণ সিরিজ শেষ করার চেষ্টা করব।
সকল পর্বের টিউটোরিয়াল এখানে ক্লিক করলে পেয়ে যাবেনঃ এইচটিএমএল টিউটোরিয়াল
এইচটিএমএল মিউজিক ও ভিডিও (Music & Video: Part-9)
এইচটিএমএল মিউজিক (Html Music):
Html ৫ এ অডিও ভিডিও প্রদর্শনের জন্য নতুন কিছু ট্যাগ এসেছে ফলে ব্রাউজারে অডিও ভিডিও চালানো এখন খুব সহজ। আগে embed নামের একটি ট্যাগ দিয়ে এই কাজগুলি চালানো হত তবে অনেক সমস্যা ছিল। যেমন embed ট্যাগ কাজ করার জন্য প্লাগিন ইনস্টল থাকতে হত (ব্রাউজারে)।
এদের মধ্যে খুব পরিচিত একটি প্লাগিন হচ্ছে ফ্লাশ প্লেয়ার এছাড়া কুইক টাইম, ভিএলসি (VLC), Windows Media Player ইত্যাদি।
সমস্যা হত যদি ইউজারের ব্রাউজারে কোন মিডিয়া প্লেয়ার প্লাগিন ইনস্টল না থাকত। যাই HTML 5 এসব সমস্যার সমাধান নিয়ে এসেছে। যদি এখনও IE (ইন্টারনেট এক্সপ্লোরার) HTML 5 সাপোর্ট করেনা তবে IE এর সর্বশেষ ভার্সনে (IE 9+) এসব সমাধান আসছে।
যেহেতু এখন বেশিরভাগ মানুষই মজিলা বা গুগল ক্রোম ব্রাউজার ব্যবহার করে তাই আমরা HTML 5 এরই উপর ভিত্তি করে টিউটোরিয়াল দিচ্ছি।
এইচটিএমএল ৫ ব্যবহার করে এখানে mp3 ফাইল বাজিয়ে দেখাচ্ছি এবং এর জন্য কোন প্লাগিন লাগবেনা। audio নামের ট্যাগ দিয়ে এটা করা যায়।
1.<audiocontrols>2.<sourcesrc="/media/Duniya_Ke_Ae_Musafir.ogg"type="audio/ogg"/>3.<sourcesrc="/media/Duniya_Ke_Ae_Musafir.mp3"type="audio/mpeg"/>4.<h1>Your Browser doesn't support audio tag</h1>5.6.</audio>
মজিলাতে mp3 সাপোর্ট করেনা তাই ogg ফরমেটে দিয়েছি তবে গুগল ক্রোমে mp3 টি চলবে।
দেখুন দটি source ট্যাগ দিয়েছি অথচ একটি দেয়া উচিৎ ছিল বলে ভাবতে পারেন। না আমারটাই ঠিক আছে কেননা ব্রাউজার fallback ফরমেট মেথড ব্যবহার করে দেখে কোন ফরমেটটি সে সাপোর্ট করে। একটার পর একটা চেক করে দেখতে দেখতে যেটা সাপোর্টেড ফরমেট সেটা বাজানো শুরু করবে।
type এট্রিবিউট টি ঐচ্ছিক তবে দিলে পারফমেন্স বাড়বে।
<audio> এর ভিতরে controls=”controls” এভাবে দিতে পারেন অথবা আমি যেভাবে দিয়েছি সেটাও হবে। এটা হচ্ছে pause/play, sound ইত্যাদি প্লেয়ারে দেখাবে কিনা সেটার জন্য। এরপর controls এর মত autoplay আরেকটা এট্রিবিউট আছে এটা দিলে অটোমেটিক মিউজিক প্লে হবে।
এইচটিএমএল মিউজিক ও ভিডিও –
loop নামে একটা এট্রিবিউট আছে এটা দিলে মিউজিকটি একবার শেষ হলে আবার প্রথম থেকে শুরু হবে এভাবে ঘুরে ঘুরে বাজতে থাকবে।
preload নামের আরেকটা এট্রিবিউট আছে audio এলিমেন্টের জন্য এবং এটার ৩ রকম মান দেয়া যায়।
১. auto দিলে পেজ লোড হবার আগেই অডিটি ডাউনলোড করবে আগে
২. meta দিলে পেজ লোড হবার সাথে সাথে মেটাডেটা যেমন author ইত্যাদি লোড হবে।
৩. none দিলে মেটাডেটা কিংবা অডিও কোনটাই পেজের আগে লোড হবেনা।
** source ট্যাগটি না দিয়ে যদি audio ট্যাগে src এট্রিবিউট দিয়ে মিডিয়া ফাইলটির উৎস দেখিয়ে দেন তবু হবে।
এখন সমস্যা হল যেহেতু audio ট্যাগ সব ব্রাউজারে সাপোর্ট করেনা তাছাড়া mp3, ogg, wav ছাড়া অন্য ফরমেট চলেনা তাই সব ব্রাউজার কমপিটাবিলাটির জন্য আপাতত embed ট্যাগ ব্যবহার করতে পারেন। তবে এটার জন্য যেকোন মিডিয়া প্লেয়ার আপনার ব্রাউজারে ইনস্টল থাকতে হবে। সাধারনত VLC media player আপনার পিসিতে ইনস্টল থাকলে VLC Web Plugin নামে একটা ছোট্র প্লাগিন আপনার ব্রাউজারে অটোমেটিক ইনস্টল আছে।
1.<objectwidth="300"height="42"type="audio/mpeg"data="audio/my_music.mp3">2.<paramname="src"value="/media/Duniya_Ke_Ae_Musafir.mp3"/>3.<embedsrc="/media/Duniya_Ke_Ae_Musafir.mp3"width="300"height="42">4.</embed>5.</object>
- আরও পড়ুনঃ বাংলা এইচটিএমএল টিউটোরিয়াল (Introduction: Part-1)
- আরও পড়ুনঃ এইচটিএমএল ট্যাগ ও এট্রিবিউট (Tag & Attribute: Part-2)
- আরও পড়ুনঃ এইচটিএমএল প্যারাগ্রাফ ও হেডিং (P tag & Heading: Part-3)
- আরও পড়ুনঃ এইচটিএমএল লিস্ট ও ফন্ট (HTML List & Font: Part-4)
- আরও পড়ুনঃ এইচটিএমএল লিংক ও এনটাইটিজ (Link & Entities: Part-5)
এইচটিএমএল ভিডিও:
audio ট্যাগের মত video নামে একটা ট্যাগ আছে এইচটিএমএল ৫ এ। এটা ভিডিও ওয়েব পেজে প্রদর্শনের জন্য। কোন প্লাগিন লাগেনা খুব সহজ। <img ট্যাগ দিয়ে ছবি দেখানোর মত। তবে audio ট্যাগের মতই video ট্যাগও ইন্টারনেট এক্সপ্লোরারে (IE 9 এর নিচে) সাপোর্ট করেনা।
এক লাইন কোড লিখেই ভিডিও পেজে দেখাতে পারেন যেমন –
1.<videosrc="/media/can_you_say_apple.mp4"controls></video>দেখুন, ভিডিও চলে আসছে। তবে এখানে বেশ কিছু এট্রিবিউট ব্যবহার করা যায় যেগুলি দিয়ে ভিডিও প্লেয়ার ভালই সাজানো যায়।
source ট্যাগ এখানেও ব্যবহার করতে পারেন, উপকার আগের টিউটোরিয়ালে যেটা বললাম সেটাই। ব্রাউজার ফরমেট চেক করে এবং সাপোর্ট না করলে পরেরটাতে যায় এভাবে যতগুলি source ট্যাগ থাকবে সব চেক করবে।
এইচটিএমএল মিউজিক ও ভিডিও –
01.<videocontrolsheight="300"width="410"poster="/media/title_pic.png">02.03.<sourcesrc="/media/Can you say banana.webm"04.05.type='video/webm;codecs="vp8, vorbis"'/>06.07.<sourcesrc="/media/can_you_say_apple.mp4"08.09.type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>10.<h1>Your browser doesn't support video tag</h1>11.</video>
এইচটিএমএল মিউজিক ও ভিডিও –
video এলিমেন্টে উপরে ৩টি এট্রিবিউট ব্যবহার করেছি। height এবং width তো দেখেই বোঝা যাচ্ছে এগুলি দিয়ে দৈর্ঘ প্রস্থ ঠিক করে দিয়েছি। poster এট্রিবিউট টি চমৎকার কাজের জিনিস। প্রথমে পিচ্চিটার জিহবা বের করা ছবিটা ভিডিওটির পোস্টার হিসেবে দিয়েছি। poster ব্যবহার করে আপনি ইচ্ছেমত ছবি দিতে পারেন।
এছাড়া muted নামে আরেকটা এট্রিবিউট আছে এটা দিলে (শুধু controls যেভাবে লিখেছি সেভাবে দিলেই হবে) শব্দ শোনা যাবেনা। বাকি সব এট্রিবিউটগুলি আগের টিউটোরিয়ালের মত।
** ৩টি ভিডিও ফরমেট সাপোর্ট করে – webm, ogg আর mp4
এখানেও embed এবং object ট্যাগ ব্যবহার করে ভিডিও দেখাতে পারেন যদি সব ব্রাউজারে দেখানো প্রয়োজন হয় যেমন
1.<objectwidth="300"height="200"type="video/webm"data="/media/Can you say banana.webm">2.<embedsrc="/media/Can you say banana.webm"width="300"height="200">3.</embed>4.</object>
embed কাজ করার জন্য যেকোন ভিডিও প্লেয়ার প্লাগিন ব্রাউজারে ইনস্টল থাকতে হয় যেমন vlc web plugin
এইচটিএমএল মিউজিক ও ভিডিও –
** সবচেয়ে ভাল হবে যদি আপনি সবগুলি অপশন একসাথে এমনভাবে রাখেন যাতে কোন না কোন একটাতে ইউজারের ব্রাউজার ধরা পরবেই। এজন্য এইচটিএমএল ৫ এবং embed একসাথে রাখুন ফলে HTML 5 সাপোর্ট না করলে embed ট্যাগ কাজ করবে।
01.<videocontrolsheight="300"width="410"poster="/media/title_pic.png"autoplay>02.03.<sourcesrc="/media/Can you say banana.webm"04.05.type='video/webm;codecs="vp8, vorbis"'/>06.07.<sourcesrc="/media/can_you_say_apple.mp4"08.09.type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>10.11.<objectwidth="300"height="410"type="video/webm"data="/media/Can you say banana.webm">12.<embedsrc="/media/Can you say banana.webm"width="300"height="410">13.</embed>14.</object>15.</video>
এখানে embed এর ভিতর ঐ ফরমেট দিতে হবে যেটা সাধারনত সব ব্রাউজার সাপোর্ট করে যেমন ফ্লাশ দিতে পারেন তবে তার আগে ভিডিওটি এই ফরমেটে বানিয়ে নিতে হবে।
এইচটিএমএল মিউজিক ও ভিডিও –
আমাদের সাথে ইউটিউব চ্যানেলে যুক্ত হতে এখানে ক্লিক করুন এবং আমাদের সাথে ফেইজবুক পেইজে যুক্ত হতে এখানে ক্লিক করুন।
গুরুত্বপূর্ণ আপডেট ও তথ্য পেতে আমাদের ওয়েবসাইটে ভিজিট করুন।
