Custom Video Player

A styled video player with custom controls: play/pause, progress scrubber, volume, fullscreen, and playback speed.

Media & Images media-images interactive video custom complex

Prompt

Create a custom video player UI with:
- Video area with a poster/thumbnail image
- Play/pause button centered over the video
- Controls bar at the bottom (appears on hover):
  - Play/pause, current time / total duration
  - Progress scrubber bar (clickable and draggable)
  - Buffer indicator on the progress bar
  - Volume button with slider
  - Playback speed selector (0.5x, 1x, 1.25x, 1.5x, 2x)
  - Fullscreen toggle
- Keyboard shortcuts: space (play/pause), arrow keys (skip 10s)
- Use Tailwind CSS, Radix UI Slider

Share:Share on X