A feature-rich, customizable HTML5 video player built with vanilla JavaScript and styled with Tailwind CSS. This project demonstrates how to build a modern media player from scratch, incorporating numerous features and UI/UX enhancements.

• Play/Pause - Toggle video playback
• Rewind/Fast-Forward - Skip ±10 seconds
• Progress Bar - Clickable & draggable with time tooltip (desktop)
• Playback Speed - Select from 0.5x, 0.75x, 1x, 1.5x, 2x

• Volume Slider - Vertical slider appears on hover/tap
• Mute Toggle - One-click mute/unmute
• Volume Memory - Persists across sessions via localStorage

• Fullscreen Mode - Immersive viewing experience
• Picture-in-Picture (PiP) - Watch while multitasking

• WebVTT Support - Load and toggle .vtt subtitle files
• Styled Captions - Custom styled subtitle display

• Video Upload - Load any video file directly
• Subtitle Upload - Load WebVTT subtitle files

• Touch Optimized - Tap-to-show controls, touch-seek
• Responsive Design - Adapts to all screen sizes
• Control Auto-Hide - Controls fade when not in use

• Invalid file type detection
• Video loading error messages
• Graceful fallbacks

• Node.js (v16+)
• npm or yarn

git clone https://github.com/OmarAglan/html-v-player.git
cd html-v-player

npm install
# or
yarn install

npm run dev
# or
yarn dev

Navigate to http://localhost:5173 in your browser.

npm run build
# or
yarn build

This creates optimized static assets in the dist folder.

LAS Player/
├── index.html          # Main HTML structure
├── main.js             # VideoPlayer class & logic
├── style.css           # Custom styles & Tailwind imports
├── package.json        # Dependencies & scripts
├── vite.config.js      # Vite configuration (if present)
├── tailwind.config.js  # Tailwind configuration
├── postcss.config.js   # PostCSS configuration
├── public/             # Static assets
│   └── vite.svg        # Favicon
└── dist/               # Production build output

• HTML5 - Semantic markup & native video APIs
• Vanilla JavaScript (ES6+) - Class-based architecture
• Tailwind CSS - Utility-first styling
• Vite - Fast development & build tool
• Material Icons - UI icons

View Demo (may reflect an older version)

This project is open source and available under the MIT License.

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Made with ❤️ by Omar Aglan