মাল্টিমিডিয়া কি?
ওয়েবে মাল্টিমিডিয়া বিভিন্ন ফর্ম্যাটের রয়েছে। এটি আপনি দেখতে বা শুনতে পারেন। যেমনঃ ছবি, মিউজিক, ভিডিও, রেকর্ড, ফিল্ম, এনিমেশন ইত্যাদি।
টিউটোরিয়ালের এই অংশে আমরা মাল্টিমিডিয়ার বিভিন্ন ধরন সম্পর্কে শিখবো।
মাল্টিমিডিয়া ফর্ম্যাট
ব্রাউজার .html এক্সটেনশন ফাইল দেখে একটি এইচটিএমএল ফাইলকে চিহ্নিত করে, .css এক্সটেনশন দেখে একটি সিএসএস ফাইলকে চিহ্নিত করে। এইভাবে ব্রাউজার .jpg, .png, .gif এক্সটেনশনের মাধ্যমে ইমেজ ফাইলকে চিহ্নিত করে। মাল্টিমিডিয়া ফাইলেরও নিজস্ব টাইপ রয়েছে। মাল্টিমিডিয়া ফাইলের এক্সটেনশনঃ .mp4, .wav, .swf, .mp3, .wmv, .avi এবং .mpg ।
সাউন্ড ফর্ম্যাট
| ফাইল ফর্ম্যাট | বিবরণ |
|---|---|
| .mid অথবা .midi | কম্পিউটার এবং মিউজিক হার্ডওয়্যারের জন্য এই ফর্ম্যাটটি ব্যবহৃত হয়। কিন্তু ব্রাউজারে সাপোর্ট করে না। |
| .wma | মাইক্রোসফট দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি মিউজিক প্লেয়ারের জন্য বেশি ব্যবহৃত হয়। এটি ব্রাউজারে সাপোর্ট করে না। |
| .aac | অ্যাপল দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি iTunes এর ডিফল্ট ফর্ম্যাট। এটি ব্রাউজারে সাপোর্ট করে না। |
| .wav | মাইক্রোসফট এবং IBM দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি এইচটিএমএল(৫)-এ সাপোর্ট করে। |
| .ogg | Xiph.Org দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি এইচটিএমএল(৫)-এ সাপোর্ট করে। |
| .mp3 | এই ফর্ম্যাটটি সকল ব্রাউজারে সাপোর্ট করে। |
প্রচলিত ভিডিও ফর্ম্যাট
| ফাইল ফর্ম্যাট | বর্ণনা |
|---|---|
| .mpg অথবা .mpeg | ভিডিও ফর্ম্যাটগুলোর মধ্যে এটি প্রথম। এটি এইচটিএমএল(৫) এ সাপোর্ট করে না। |
| .avi | মাইক্রোসফট দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি ভিডিও ক্যামেরা এবং টিভি হার্ডওয়্যারের জন্য বেশি ব্যবহৃত হয়। এই ফর্ম্যাটটি ব্রাউজারে সাপোর্ট করে না। |
| .wmv | মাইক্রোসফট দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি ভিডিও ক্যামেরা এবং টিভি হার্ডওয়্যারের জন্য বেশি ব্যবহৃত হয়। এই ফর্ম্যাটটি ব্রাউজারে সাপোর্ট করে না। |
| .mov | অ্যাপল দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি ভিডিও ক্যামেরা এবং টিভি হার্ডওয়্যারের জন্য বেশি ব্যবহৃত হয়। এই ফর্ম্যাটটি ব্রাউজারে সাপোর্ট করে না। |
| .rm অথবা .ram | রিয়েল মিডিয়া দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি অনলাইন ভিডিও এবং ইন্টারনেট টিভির জন্য ব্যবহৃত হয়। এই ফর্ম্যাটটি ব্রাউজারে সাপোর্ট করে না। |
| .swf অথবা .flv | ম্যাক্রোমিডিয়া দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি ব্রাউজারে ভিডিও চালানোর জন্য প্রায়ই ব্যবহৃত হয়। |
| .ogg | Xiph.Org ফাউন্ডেশনের দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি এইচটিএমএল(৫) এ সাপোর্ট করে। |
| .webm | গুগল, মজিলা, অপেরা, অ্যাডোব এবং ওয়েব জায়ান্ট দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি এইচটিএমএল(৫) এ সাপোর্ট করে। |
| .mp4 | মুভিং পিকচার এক্সপার্ট গ্রুপ দ্বারা ডেভেলপকৃত এই ফর্ম্যাটটি এইচটিএমএল(৫) এ সাপোর্ট করে। |
এইচটিএমএল(৫) এর পূর্বে প্লাগ-ইন ব্যবহার করে ব্রাউজারে ভিডিও চালানো হতো। কিন্তু বর্তমানে আমরা এইচটিএমএল(৫) ট্যাগ ব্যবহার করে সরাসরি ব্রাউজারের মধ্যে ভিডিও চালাতে পারি।
এক নজরে এইচটিএমএল(৫) ভিডিও ট্যাগ সমুহ
| ট্যাগ | বর্ণনা |
|---|---|
< video > | যে কোনো ধরনের ভিডিও বা চলচ্চিত্র ডিফাইন করে। |
< source > | < video > এবং < audio > ট্যাগের জন্য মিডিয়া ফাইলের উৎস ডিফাইন করে। |
< track > | মিডিয়ার জন্য সাব-টাইটেল অথবা যে কোনো ধরনের টেক্সট(পড়ার উপযুক্ত) ডিফাইন করে। |
উদাহরণ
kt_satt_skill_example_id=1773
ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ৪.০ | ৯.০ | ৩.৫ | ৪.০ | ১০.৫ |
এইচটিএমএলে ভিডিও প্রদর্শনের জন্য < video > এলিমেন্ট ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1774
উদাহরণের ব্যাখ্যা
controls এট্রিবিউটটি ভিডিও চালু করা, বন্ধ করা এবং ভলিউম নিয়ন্ত্রন করার ক্ষমতা দেয়। সবসময় height এবং width এট্রিবিউট ব্যবহার করতে হবে। এই এট্রিবিউটগুলো ব্যবহার না করলে ভিডিও লোড হওয়ার পর পেজের গঠন পরিবর্তন হয়ে যাবে।
যে সকল ব্রাউজারে < video > এলিমেন্ট সাপোর্ট করে না, ঐ সকল ব্রাউজারে < video > এবং < /video> এর মাঝের লেখা প্রদর্শন করবে। একাধিক < source> এলিমেন্টের মাধ্যমে একাধিক ভিডিও ফাইল যুক্ত করতে পারি। ব্রাউজার প্রথমে সাপোর্টেড যে ফর্ম্যাটটি পাবে তাকেই ব্যবহার করবে।
autoplay এট্রিবিউট
স্বয়ংক্রিয়ভাবে একটি ভিডিও চালু করার জন্য autoplay এট্রিবিউট ব্যবহার করা হয়। যে সকল ভিডিও ট্যাগে autoplay এট্রিবিউট ব্যবহার করা হয় সে সকল ভিডিও তে ব্যবহারকারীর কোনো নিয়ন্ত্রন থাকে না। আর ওয়েব পেজ সম্পূর্ণ লোড হওয়ার সাথে সাথে ভিডিওটি স্বয়ংক্রিয়ভাবে চালু হয়ে যায়ঃ
উদাহরণ
kt_satt_skill_example_id=1775
ভিডিও ফর্ম্যাট সাপোর্ট
< video > এলিমেন্টে তিনটি ভিডিও ফর্ম্যাট সাপোর্ট করে। যথাঃ MP4, WebM এবং Ogg । এই তিনটি ফর্ম্যাটের মধ্যে ইন্টারনেট এক্সপ্লোরার ও সাফারিতে শুধুমাত্র MP4 ফর্ম্যাট সাপোর্ট করে এবং গুগল ক্রোম ও মজিলা ফায়ারফক্সে তিনটি ফর্ম্যাটই সাপোর্ট করে আর অপেরা ব্রাউজারে তিনটি ফর্ম্যাটই সাপোর্ট করে তবে MP4 ফর্ম্যাটটি ভার্সন ২৫.০ থেকে সাপোর্ট করে।
মিডিয়া টাইপ
তিনটি ফর্ম্যাটের জন্য তিনটি মিডিয়া টাইপ ব্যবহার করতে হয়। MP4 ফর্ম্যাটের জন্য video/mp4, WebM ফর্ম্যাটের জন্য video/webm এবং Ogg ফর্ম্যাটের জন্য video/ogg ব্যবহার করতে হয়।
এইচটিএমএল(৫) এর পূর্বে অডিও ফাইল চালানোর জন্য প্লাগ-ইন ব্যবহার করতে হতো। বর্তমানে ওয়েব পেজে অডিও চালানোর জন্য এইচটিএমএল(৫)-এ এলিমেন্ট ব্যবহার করা হয়।
এক নজরে এইচটিএমএল(৫) অডিও ট্যাগ সমুহ
| ট্যাগ | বর্ণনা |
|---|---|
< audio > | যে কোনো ধরনের অডিও বা সাউন্ড ডিফাইন করে। |
< source > | < video > এবং < audio > ট্যাগের জন্য মিডিয়া ফাইলের উৎস ডিফাইন করে। |
ব্রাউজার সাপোর্ট
| এলিমেন্ট | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ৪.০ | ৯.০ | ৩.৫ | ৪.০ | ১০.৫ |
ওয়েবে অডিও চালানোর জন্য এইচটিএমএল(৫) < audio > এলিমেন্ট ব্যবহার করা হয়ঃ
উদাহরণ
kt_satt_skill_example_id=1776
উদাহরণের ব্যাখ্যা
controls এট্রিবিউটটি অডিও চালু করা, বন্ধ করা এবং ভলিউম নিয়ন্ত্রন করার ক্ষমতা দেয়। যে সকল ব্রাউজারে < audio > এলিমেন্ট সাপোর্ট করে না, ঐ সকল ব্রাউজারে < audio > এলিমেন্টের মাঝের লেখাটি প্রদর্শন করবে।
একাধিক < source > এলিমেন্টের মাধ্যমে একাধিক অডিও ফাইল ফর্ম্যাট যুক্ত করতে পারি। ব্রাউজার প্রথম সাপোর্টেড ফর্ম্যাটটি ব্যবহার করবে।
অডিও ফর্ম্যাট সাপোর্ট
এলিমেন্টে তিনটি ফর্ম্যাট সাপোর্ট করে। যথাঃ MP3, Wav, এবং Ogg । এই তিনটি ফর্ম্যাটের মধ্যে ইন্টারনেট এক্সপ্লোরারে শুধুমাত্র MP3 ফর্ম্যাট সাপোর্ট করে এবং সাফারি ব্রাউজারে MP3 ও Wav ফর্ম্যাট সাপোর্ট করে আর গুগল ক্রোম, মজিলা ফায়ারফক্স এবং অপেরা ব্রাউজারে তিনটি ফর্ম্যাটই সাপোর্ট করে।
মিডিয়া টাইপ
তিনটি ফর্ম্যাটের জন্য তিনটি মিডিয়া টাইপ ব্যবহার করতে হয়। MP3 ফর্ম্যাটের জন্য audio/mpeg, Wav ফর্ম্যাটের জন্য audio/wav এবং Ogg ফর্ম্যাটের জন্য audio/ogg ব্যবহার করতে হয়।
সাহায্যকারী অ্যাপ্লিকেশনগুলি এক ধরনের কম্পিউটার প্রোগ্রাম যা একটি ওয়েব ব্রাউজারের সাধারণ কার্যকারিতা বৃদ্ধি করে। এই সকল অ্যাপ্লিকেশনকে প্লাগইন বলা হয়। একটি প্লাগ-ইন এর উদ্দেশ্য হল এইচটিএমএল ব্রাউজারের কার্যকারিতা বৃদ্ধি করা। প্লাগইনগুলি < object> ট্যাগ বা < embed> ট্যাগ দিয়ে ওয়েব পেজগুলিতে যোগ করা হয়। প্লাগইনগুলি অনেক উদ্দেশ্যে ব্যবহার করা যেতে পারে, যেমনঃ- মানচিত্র প্রদর্শন, ভাইরাস স্ক্যান, আপনার ই-মেইল আইডি যাচাই ইত্যাদি।
এক নজরে প্লাগ-ইন ব্যবহৃত ট্যাগ সমূহ
| ট্যাগ | বর্ণনা |
|---|---|
< embed > | < embed> ট্যাগ একটি বহিরাগত অ্যাপ্লিকেশন বা ইন্টারেক্টিভ কন্টেন্ট / প্লাগ-ইনের জন্য একটি ধারক ডিফাইন করে। |
< object > | < object > ট্যাগ এইচটিএমএল ডকুমেন্টের মধ্যে একটি এমবেডেড(embeded) অবজেক্টকে ডিফাইন করে। |
< embed > এলিমেন্টটি প্রায় সকল আধুনিক ব্রাউজারে সাপোর্ট করে।
উদাহরণ
kt_satt_skill_example_id=1782
এইচটিএমএল ডকুমেন্টের মধ্যে এইচটিএমএল ফাইল যোগ করার জন্য < embed> এলিমেন্ট ব্যবহার করা যায়ঃ
উদাহরণ
kt_satt_skill_example_id=1783
ইমেজ ব্যবহারের জন্যঃ
উদাহরণ
kt_satt_skill_example_id=1787
সকল ব্রাউজারেই < object > এলিমেন্ট সাপোর্ট করে। আপনার ওয়েব পেজগুলিতে এর দ্বারা মাল্টিমিডিয়া যেমন- অডিও, ভিডিও, জাভা অ্যাপলেট, অ্যাক্টিভক্স, পিডিএফ এবং ফ্লাশ ফাইল এম্বেড করতে পারেন।
উদাহরণ
kt_satt_skill_example_id=1791
এইচটিএমএল ডকুমেন্টের মধ্যে এইচটিএমএল ফাইল যুক্ত করার জন্যেও < object > এলিমেন্ট ব্যবহার করা যায়ঃ
উদাহরণ
kt_satt_skill_example_id=1793
এইচটিএমএলে পেজে ভিডিও চালু করার জন্য সবচেয়ে সহজ পদ্ধতি হলো ইউটিউব ব্যবহার করা। একটি ওয়েব পৃষ্ঠায় একটি ভিডিও এম্বেড করা কাটিং এবং পেস্টিং এর মতই সহজ কাজ। ইউটিউব থেকে আপনার সাইটে আপনার একটি ভিডিও যোগ করার জন্য কত খরচ হয়? উত্তর - কিছুই নেই। বরং ইউটিউব অতিরিক্ত পরিষেবা এবং তাদের ব্যান্ডউইথও সরবরাহ করে।
ভিডিও ফর্ম্যাট নিয়ে ঝামেলা?
আমাদের এই টিউটোরিয়ালের প্রথম দিকে আপনি হয়তো আপনার ভিডিওটিকে বিভিন্ন ফর্ম্যাটে রুপান্তর করেছেন সকল ব্রাউজারে সাপোর্ট করার জন্য। বিভিন্ন ফর্ম্যাটে ভিডিও রুপান্তর করা কঠিন এবং সময় সাপেক্ষ কাজ। এক্ষেত্রে, আপনার ওয়েব পেজে ইউটিউব থেকে সরাসরি ভিডিও চালু করা হতে পারে একটি সহজ সমাধান।
ইউটিউব ভিডিও আইডি
যখন আপনি ইউটিউবে ভিডিও চালু করেন বা সংরক্ষন করেন, তখন ইউটিউব একটি আইডি(যেমনঃ bNRpnd4qWfc) ইউটিউবের লিংকের পরে প্রদর্শন করে। আপনি এই আইডি ব্যবহার করে আপনার এইচটিএমএল কোডে ভিডিওটি সুপারিশ(refer) করতে পারেন।
এইচটিএমএলে ইউটিউব ভিডিও
আপনার ওয়েবপেজে ইউটিউব ভিডিও চালানোর জন্য, নিচের কাজগুলো করতে হবেঃ
- ইউটিউবে ভিডিও আপলোড করুন।
- ভিডিওর আইডি টি নোট করুন।
- আপনার ওয়েব পেজে একটি `;
} else {
card +=
``;
}
} else if (content.type == 'book') {
card += `
`; } else if (content.type == 'course') { console.log(content); card += `BOOK
${content.book.name}
${content.book.author_name ? '' + content.book.author_name + '' : ''} by ${content.book.business?.name || 'Satt Academy'}
${content.book.price == 0 || content.book.price == '0' || content.book.price == null ? 'Free' : '৳' + content.book.price + ''}`; } card += `COURSE${content.course.name}
${content.course.author_name ? '' + content.course.author_name + '' : ''} by ${content.course.business?.name || 'Satt Academy'}
${content.course.price == 0 || content.course.price == '0' || content.course.price == null ? 'Free' : '৳' + content.course.price + ''} ${content.course.course_level.toUpperCase()}