✨ Features
- ▶ Play / Pause
- ⏱ Seekbar with live progress
- ⏳ Current time / Remaining time toggle
- 🔊 Volume control with hover slider
- 🔇 Mute / Unmute
- ⚡ Playback speed control
- 🔁 Loop toggle
- ⛶ Fullscreen support
- 💡 Tooltips for all controls
- 🎨 Smooth Tailwind transitions
- 🖱 Hover-activated control bar
- 📱 Responsive aspect-ratio video container
🛠 Tech Stack
- HTML5 Video API
- TailwindCSS
- Vanilla JavaScript
- Vite
📂 Project Structure
project
│
├─ public
│ └─ video.mp4
│
├─ src
│ ├─ script.js
│ └─ index.css
│
├─ index.html
├─ package.json
└─ vite.config.js
🚀 Getting Started
1️⃣ Clone the repository
git clone https://github.com/lakshyaraj2006/custom-html-video-player.git
cd custom-video-player
2️⃣ Install dependencies
npm install
3️⃣ Start development server
npm run dev
📦 Build for Production
npm run build
The optimized build will be generated in:
dist/
Preview production build:
npm run preview
🎮 Controls
| Control | Action |
|---|---|
| ▶ | Play / Pause |
| 🔊 | Volume toggle |
| Volume slider | Adjust volume |
| Seekbar | Jump to any time |
| Speed dropdown | Change playback speed |
| 🔁 | Toggle loop |
| ⛶ | Toggle fullscreen |
| Time display | Toggle remaining time |
🎨 UI Highlights
- YouTube-style hover controls
- Smooth transitions using Tailwind
- Dynamic tooltips
- Responsive layout
- Minimal custom CSS using
@apply
📜 License
This project is open source and available under the MIT License.
💡 Future Improvements
- Keyboard shortcuts (YouTube style)
- Theatre mode
- Double-click fullscreen
- Thumbnail preview on seek
- Subtitle / caption support
⭐ If you like the project, consider starring the repository!