আজকের এই ব্লগে আমরা দেখবো কীভাবে সহজে HTML এবং JavaScript ব্যবহার করে একটি YouTube স্টাইলের কাস্টম ভিডিও প্লেয়ার তৈরি করা যায়। আপনি যদি ওয়েবসাইটে নিজের ভিডিও প্লেয়ার যোগ করতে চান, তাহলে এই গাইডটি আপনার জন্য পারফেক্ট!
কেন কাস্টম ভিডিও প্লেয়ার দরকার?
- ওয়েবসাইটের ডিজাইনের সাথে মিল রাখতে
- ইউজার এক্সপেরিয়েন্স উন্নত করতে
- স্পেশাল ফিচার (যেমন কাস্টম প্লে/পজ বাটন, ভলিউম কন্ট্রোল) যোগ করতে
চলুন শুরু করা যাক!
১. HTML Structure তৈরি করা
প্রথমে আমরা একটি সাধারন ভিডিও এবং কাস্টম কন্ট্রোলের জন্য HTML কোড লিখবো:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Custom Video Player</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="video-container">
<video id="myVideo" width="640" height="360">
<source src="your-video.mp4" type="video/mp4">
আপনার ব্রাউজার ভিডিও ট্যাগ সাপোর্ট করে না।
</video>
<div class="controls">
<button id="playPause">প্লে</button>
<input type="range" id="seekBar" value="0">
<button id="mute">মিউট</button>
<input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS দিয়ে স্টাইল করবো
একটি সুন্দর ইউটিউব লুক পেতে কিছু CSS যোগ করবো:
/* style.css */
body {
background-color: #111;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.video-container {
position: relative;
}
.controls {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
gap: 10px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
button, input[type="range"] {
background: #333;
border: none;
color: white;
padding: 8px 12px;
border-radius: 5px;
cursor: pointer;
}
৩. JavaScript দিয়ে ফাংশনালিটি যুক্ত করা
এখন আমরা প্লে/পজ, মিউট এবং সিকবার কন্ট্রোল করবো:
// script.js
const video = document.getElementById('myVideo');
const playPause = document.getElementById('playPause');
const mute = document.getElementById('mute');
const seekBar = document.getElementById('seekBar');
const volumeBar = document.getElementById('volumeBar');
// প্লে এবং পজ টগল করা
playPause.addEventListener('click', function() {
if (video.paused) {
video.play();
playPause.textContent = 'পজ';
} else {
video.pause();
playPause.textContent = 'প্লে';
}
});
// সিকবার আপডেট করা
video.addEventListener('timeupdate', function() {
const value = (100 / video.duration) * video.currentTime;
seekBar.value = value;
});
// সিকবার দিয়ে ভিডিও স্কিপ করা
seekBar.addEventListener('input', function() {
const time = video.duration * (seekBar.value / 100);
video.currentTime = time;
});
// মিউট টগল করা
mute.addEventListener('click', function() {
video.muted = !video.muted;
mute.textContent = video.muted ? 'আনমিউট' : 'মিউট';
});
// ভলিউম কন্ট্রোল করা
volumeBar.addEventListener('input', function() {
video.volume = volumeBar.value;
});
শেষ কথা
এইভাবে সহজেই আপনি নিজের ওয়েবসাইটে YouTube স্টাইলের কাস্টম ভিডিও প্লেয়ার বানাতে পারেন! চাইলে আরও ফিচার যেমন ফুলস্ক্রিন মোড, স্পিড কন্ট্রোল, অটোপ্লে ইত্যাদিও যোগ করতে পারবেন।
আগামীতে আমি দেখাবো কিভাবে আরও অ্যাডভান্সড ভিডিও প্লেয়ার বানাতে পারবেন! ✨