অডিও এবং ভিডিও এমবেড করা (<audio>, <video>)

ইমেজ এবং মিডিয়া এলিমেন্টস - এক্সএইচটিএমএল (XHTML) - Web Development

349

XHTML-এ ওয়েব পেজে অডিও এবং ভিডিও ফাইল এমবেড করতে <audio> এবং <video> ট্যাগ ব্যবহার করা হয়। এই ট্যাগগুলি HTML5-এর একটি অংশ, তবে XHTML ডকুমেন্টে সঠিকভাবে তাদের ব্যবহার করতে কিছু নিয়ম এবং কনভেনশন অনুসরণ করতে হয়। এখানে আমরা কিভাবে XHTML ডকুমেন্টে অডিও এবং ভিডিও এমবেড করা যায়, তা আলোচনা করব।


১. <audio> ট্যাগ ব্যবহার

<audio> ট্যাগের মাধ্যমে ওয়েব পেজে অডিও ফাইল এমবেড করা যায়। এটি এক বা একাধিক অডিও সোর্স ফাইল অন্তর্ভুক্ত করতে সক্ষম এবং ব্রাউজারগুলিকে অডিও প্লে করার জন্য নির্দেশ দেয়। XHTML-এ এটি সঠিকভাবে ব্যবহার করতে হবে এবং বন্ধনসহ লিখতে হবে।

১.১ <audio> ট্যাগের মৌলিক গঠন

<audio controls>
    <source src="audiofile.mp3" type="audio/mp3" />
    <source src="audiofile.ogg" type="audio/ogg" />
    Your browser does not support the audio element.
</audio>
  • controls অ্যাট্রিবিউট: এটি প্লে, পজ, ভলিউম নিয়ন্ত্রণ ইত্যাদি যোগ করে।
  • <source> ট্যাগ: এটি বিভিন্ন ফাইল ফরম্যাট প্রদান করে, যাতে ব্রাউজারটি যেকোনো একটি ফরম্যাট খেলতে পারে।
  • Fallback text: যদি ব্রাউজার অডিও প্লে করতে সক্ষম না হয়, তাহলে এখানে একটি ব্যাখ্যামূলক টেক্সট থাকতে পারে।

১.২ অডিও ফাইল ফরম্যাট

অডিও ফাইলের জন্য সাধারণত ব্যবহৃত ফরম্যাটগুলি হল:

  • MP3: সবচেয়ে সাধারণ এবং জনপ্রিয় অডিও ফরম্যাট।
  • OGG: ওপেন সোর্স অডিও ফরম্যাট, অনেক ব্রাউজারে সমর্থিত।

অডিও ফাইল এমবেড করার সময় আপনি একাধিক সোর্স ফরম্যাট দিতে পারেন, যেমন উপরের উদাহরণে দেওয়া হয়েছে।


২. <video> ট্যাগ ব্যবহার

<video> ট্যাগের মাধ্যমে ওয়েব পেজে ভিডিও ফাইল এমবেড করা যায়। এটি বিভিন্ন ভিডিও ফরম্যাট সমর্থন করে এবং ব্রাউজারকে নির্দেশ দেয় ভিডিও ফাইল প্লে করার জন্য। XHTML-এ এটি ব্যবহারের সময় সঠিকভাবে controls এবং অন্যান্য অ্যাট্রিবিউট ব্যবহার করতে হয়।

২.১ <video> ট্যাগের মৌলিক গঠন

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
    Your browser does not support the video element.
</video>
  • width এবং height অ্যাট্রিবিউট: ভিডিও প্লেয়ারটির প্রস্থ এবং উচ্চতা নির্ধারণ করে।
  • controls অ্যাট্রিবিউট: ভিডিও প্লেব্যাকের জন্য প্লে, পজ, ভলিউম নিয়ন্ত্রণ ইত্যাদি প্রদর্শন করে।
  • <source> ট্যাগ: এটি একাধিক ভিডিও ফরম্যাট প্রদান করে, যাতে ব্রাউজারটি উপযুক্ত ফরম্যাট প্লে করতে পারে।
  • Fallback text: যদি ব্রাউজার ভিডিও প্লে করতে সক্ষম না হয়, তাহলে এখানে একটি ব্যাখ্যামূলক টেক্সট থাকতে পারে।

২.২ ভিডিও ফাইল ফরম্যাট

ভিডিও ফাইলের জন্য সাধারণত ব্যবহৃত ফরম্যাটগুলি হল:

  • MP4: সবচেয়ে জনপ্রিয় ভিডিও ফরম্যাট, অধিকাংশ ব্রাউজারে সমর্থিত।
  • OGG: ওপেন সোর্স ভিডিও ফরম্যাট, কিছু ব্রাউজারে সমর্থিত।
  • WebM: বিশেষত Chrome এবং Firefox-এ ব্যবহৃত হয়।

৩. XHTML-এ <audio> এবং <video> ব্যবহারের নিয়ম

৩.১ সব ট্যাগ এবং অ্যাট্রিবিউট কেস সেনসিটিভ

XHTML-এ সব ট্যাগ এবং অ্যাট্রিবিউট ছোট হাতের অক্ষরে থাকতে হবে। উদাহরণস্বরূপ:

<audio controls>
    <source src="audiofile.mp3" type="audio/mp3" />
</audio>

৩.২ ট্যাগগুলো বন্ধনসহ ব্যবহার

XHTML-এ একক ট্যাগগুলির জন্য (যেমন <audio>, <video>, <source>) বন্ধন ব্যবহার করা আবশ্যক। উদাহরণস্বরূপ:

<source src="video.mp4" type="video/mp4" />

৩.৩ ব্রাউজার ফলোব্যাক টেক্সট

যদি ব্রাউজার অডিও বা ভিডিও ফাইল প্লে করতে না পারে, তাহলে একটি ব্যাখ্যামূলক টেক্সট প্রদান করা উচিত, যা ব্যবহারকারীকে জানাবে।

Your browser does not support the video element.

৪. উদাহরণ: এক্সএইচটিএমএল-এ অডিও এবং ভিডিও এমবেড

৪.১ অডিও এমবেড উদাহরণ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Audio Example</title>
</head>
<body>
    <h1>Audio Player</h1>
    <audio controls>
        <source src="sample-audio.mp3" type="audio/mp3" />
        <source src="sample-audio.ogg" type="audio/ogg" />
        Your browser does not support the audio element.
    </audio>
</body>
</html>

৪.২ ভিডিও এমবেড উদাহরণ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>Video Example</title>
</head>
<body>
    <h1>Video Player</h1>
    <video width="640" height="360" controls>
        <source src="sample-video.mp4" type="video/mp4" />
        <source src="sample-video.ogg" type="video/ogg" />
        Your browser does not support the video element.
    </video>
</body>
</html>

XHTML-এ <audio> এবং <video> ট্যাগ ব্যবহার করার মাধ্যমে আপনি আপনার ওয়েব পেজে অডিও এবং ভিডিও ফাইল এমবেড করতে পারেন। তবে, XHTML-এর স্ট্রিক্ট গঠন অনুসরণ করতে হয়, যেমন ট্যাগগুলি বন্ধনসহ ব্যবহার, কেস সেনসিটিভিটি রক্ষা, এবং ফরম্যাট ফ্যালব্যাক যুক্ত করা। এই নিয়মগুলো অনুসরণ করলে আপনি একটি সঠিকভাবে কাজ করা মাল্টিমিডিয়া এমবেড পেজ তৈরি করতে পারবেন।

Content added By
Promotion

Are you sure to start over?

Loading...