এইচটিএমএল মিডিয়া উপাদানগুলো ব্যবহার করে ওয়েবপেজে অডিও এবং ভিডিও কন্টেন্ট সহজেই সংযোজন করা যায়। HTML5 মিডিয়া উপাদানগুলো ওয়েব ডেভেলপমেন্টে মাল্টিমিডিয়া কন্টেন্ট অন্তর্ভুক্ত করার একটি সহজ এবং কার্যকর উপায় সরবরাহ করে।
<audio>)ব্যবহার: ওয়েবপেজে অডিও যোগ করতে ব্যবহৃত হয়।
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
আপনার ব্রাউজার এই অডিও ফরম্যাট সমর্থন করে না।
</audio>
<video>)ব্যবহার: ওয়েবপেজে ভিডিও যোগ করতে ব্যবহৃত হয়।
<video controls width="600">
<source src="video-file.mp4" type="video/mp4">
আপনার ব্রাউজার এই ভিডিও ফরম্যাট সমর্থন করে না।
</video>
controlsব্যাখ্যা: প্লেব্যাক কন্ট্রোল (প্লে, পজ, ভলিউম ইত্যাদি) যোগ করার জন্য ব্যবহৃত হয়।
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
autoplayব্যাখ্যা: মিডিয়া স্বয়ংক্রিয়ভাবে চালু হবে।
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>
loopব্যাখ্যা: মিডিয়া শেষ হওয়ার পরে পুনরায় শুরু হবে।
<audio controls loop>
<source src="audio.mp3" type="audio/mpeg">
</audio>
mutedব্যাখ্যা: মিডিয়া মিউটেড অবস্থায় শুরু হবে।
<video muted autoplay>
<source src="video.mp4" type="video/mp4">
</video>
preloadব্যাখ্যা: মিডিয়া লোড করার সময় নিয়ন্ত্রণ করে। এর তিনটি মান রয়েছে:
none: প্রি-লোড বন্ধ।metadata: শুধুমাত্র মিডিয়ার মেটাডাটা লোড হবে।auto: সম্পূর্ণ মিডিয়া ফাইল লোড হবে।<audio preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
</audio>
HTML মিডিয়া উপাদানের সাথে জাভাস্ক্রিপ্ট ব্যবহার করে বিভিন্ন ইভেন্ট পরিচালনা করা যায়।
<video id="myVideo" width="600" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">প্লে করুন</button>
<button onclick="pauseVideo()">পজ করুন</button>
<script>
const video = document.getElementById('myVideo');
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
</script>
play: মিডিয়া প্লে শুরু হলে ট্রিগার হয়।pause: মিডিয়া পজ করলে ট্রিগার হয়।ended: মিডিয়া শেষ হলে ট্রিগার হয়।| ফরম্যাট | বিবরণ | সমর্থন |
|---|---|---|
| MP3 | সর্বাধিক ব্যবহৃত ফরম্যাট | সকল ব্রাউজার |
| OGG | ওপেন ফরম্যাট | Firefox, Chrome |
| WAV | উচ্চ মানের অডিও | সকল ব্রাউজার |
| ফরম্যাট | বিবরণ | সমর্থন |
|---|---|---|
| MP4 | সর্বাধিক ব্যবহৃত ফরম্যাট | সকল ব্রাউজার |
| WebM | ওপেন ফরম্যাট | Firefox, Chrome |
| Ogg | ওপেন ফরম্যাট | Firefox, Chrome |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Media Example</title>
</head>
<body>
<h1>ভিডিও প্লেয়ার</h1>
<video id="videoPlayer" controls width="600">
<source src="video.mp4" type="video/mp4">
আপনার ব্রাউজার ভিডিও সমর্থন করে না।
</video>
<br>
<button onclick="playVideo()">প্লে</button>
<button onclick="pauseVideo()">পজ</button>
<button onclick="restartVideo()">রিস্টার্ট</button>
<script>
const videoPlayer = document.getElementById('videoPlayer');
function playVideo() {
videoPlayer.play();
}
function pauseVideo() {
videoPlayer.pause();
}
function restartVideo() {
videoPlayer.currentTime = 0;
}
</script>
</body>
</html>
এইচটিএমএল মিডিয়া ব্যবহারের মাধ্যমে আপনার ওয়েবপেজে মাল্টিমিডিয়া উপাদান যোগ করে এটি আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য আকর্ষণীয় করে তোলা সম্ভব।
এইচটিএমএল মিডিয়া উপাদানগুলো ব্যবহার করে ওয়েবপেজে অডিও এবং ভিডিও কন্টেন্ট সহজেই সংযোজন করা যায়। HTML5 মিডিয়া উপাদানগুলো ওয়েব ডেভেলপমেন্টে মাল্টিমিডিয়া কন্টেন্ট অন্তর্ভুক্ত করার একটি সহজ এবং কার্যকর উপায় সরবরাহ করে।
<audio>)ব্যবহার: ওয়েবপেজে অডিও যোগ করতে ব্যবহৃত হয়।
<audio controls>
<source src="audio-file.mp3" type="audio/mpeg">
আপনার ব্রাউজার এই অডিও ফরম্যাট সমর্থন করে না।
</audio>
<video>)ব্যবহার: ওয়েবপেজে ভিডিও যোগ করতে ব্যবহৃত হয়।
<video controls width="600">
<source src="video-file.mp4" type="video/mp4">
আপনার ব্রাউজার এই ভিডিও ফরম্যাট সমর্থন করে না।
</video>
controlsব্যাখ্যা: প্লেব্যাক কন্ট্রোল (প্লে, পজ, ভলিউম ইত্যাদি) যোগ করার জন্য ব্যবহৃত হয়।
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
autoplayব্যাখ্যা: মিডিয়া স্বয়ংক্রিয়ভাবে চালু হবে।
<video autoplay>
<source src="video.mp4" type="video/mp4">
</video>
loopব্যাখ্যা: মিডিয়া শেষ হওয়ার পরে পুনরায় শুরু হবে।
<audio controls loop>
<source src="audio.mp3" type="audio/mpeg">
</audio>
mutedব্যাখ্যা: মিডিয়া মিউটেড অবস্থায় শুরু হবে।
<video muted autoplay>
<source src="video.mp4" type="video/mp4">
</video>
preloadব্যাখ্যা: মিডিয়া লোড করার সময় নিয়ন্ত্রণ করে। এর তিনটি মান রয়েছে:
none: প্রি-লোড বন্ধ।metadata: শুধুমাত্র মিডিয়ার মেটাডাটা লোড হবে।auto: সম্পূর্ণ মিডিয়া ফাইল লোড হবে।<audio preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
</audio>
HTML মিডিয়া উপাদানের সাথে জাভাস্ক্রিপ্ট ব্যবহার করে বিভিন্ন ইভেন্ট পরিচালনা করা যায়।
<video id="myVideo" width="600" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="playVideo()">প্লে করুন</button>
<button onclick="pauseVideo()">পজ করুন</button>
<script>
const video = document.getElementById('myVideo');
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
</script>
play: মিডিয়া প্লে শুরু হলে ট্রিগার হয়।pause: মিডিয়া পজ করলে ট্রিগার হয়।ended: মিডিয়া শেষ হলে ট্রিগার হয়।| ফরম্যাট | বিবরণ | সমর্থন |
|---|---|---|
| MP3 | সর্বাধিক ব্যবহৃত ফরম্যাট | সকল ব্রাউজার |
| OGG | ওপেন ফরম্যাট | Firefox, Chrome |
| WAV | উচ্চ মানের অডিও | সকল ব্রাউজার |
| ফরম্যাট | বিবরণ | সমর্থন |
|---|---|---|
| MP4 | সর্বাধিক ব্যবহৃত ফরম্যাট | সকল ব্রাউজার |
| WebM | ওপেন ফরম্যাট | Firefox, Chrome |
| Ogg | ওপেন ফরম্যাট | Firefox, Chrome |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Media Example</title>
</head>
<body>
<h1>ভিডিও প্লেয়ার</h1>
<video id="videoPlayer" controls width="600">
<source src="video.mp4" type="video/mp4">
আপনার ব্রাউজার ভিডিও সমর্থন করে না।
</video>
<br>
<button onclick="playVideo()">প্লে</button>
<button onclick="pauseVideo()">পজ</button>
<button onclick="restartVideo()">রিস্টার্ট</button>
<script>
const videoPlayer = document.getElementById('videoPlayer');
function playVideo() {
videoPlayer.play();
}
function pauseVideo() {
videoPlayer.pause();
}
function restartVideo() {
videoPlayer.currentTime = 0;
}
</script>
</body>
</html>
এইচটিএমএল মিডিয়া ব্যবহারের মাধ্যমে আপনার ওয়েবপেজে মাল্টিমিডিয়া উপাদান যোগ করে এটি আরও ইন্টারেক্টিভ এবং ব্যবহারকারীর জন্য আকর্ষণীয় করে তোলা সম্ভব।
or
আপনি আমাকে যেকোনো প্রশ্ন করতে পারেন, যেমনঃ
Are you sure to start over?
