Video playerPro
Video with custom auto-hiding controls, scrubbing, captions, fullscreen and shortcuts.
0:00 / 0:00
Space or K to play · ← / → to skip 5s · M to mute · F for fullscreen. Sample video: CC0, from MDN.
When to use
- Product demos, courses and marketing videos you host yourself.
When not to use
- YouTube or Vimeo embeds: use their players.
Installation
Usage
Import it from @/components/ui/video-player after installing.
example.tsx
import { VideoPlayer } from "@/components/ui/video-player";
<VideoPlayer title="Product tour" src="/videos/tour.mp4" poster="/videos/tour.jpg" captions="/videos/tour.vtt" />API reference
VideoPlayer
A <video> with custom controls that hide while playing.
| Prop | Type | Default | Description |
|---|---|---|---|
| src / poster | string | – | Video and poster URLs. |
| title | string | – | Names the player. |
| captions | string | – | WebVTT file; shown by default. |
| aspectRatio | string | "16 / 9" | Frame ratio. |
Keyboard interactions
| Keys | Action |
|---|---|
| SpaceorK | Play or pause |
| ←or→ | Back or forward 5 seconds |
| M | Mute |
| F | Fullscreen |
Accessibility
- A focusable region named after the video; every control is labelled; the seek bar reports time as text.
- Controls stay visible while focus is inside.
Motion
- Controls fade after 2.2 seconds of stillness; a play / pause badge pulses in the center.
Responsive behavior
- Fills its width at the given ratio; playsInline on phones.
Performance
- preload="metadata" so nothing heavy loads until play.
Notes for AI
- Always provide captions for speech.
This page as Markdown, for assistants and coding agents:
/components/video-player/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt