Video Player

Custom controls over a native video: poster with a big play button, auto-hiding control bar, chaptered scrubber with buffered range and hover-time tooltip, skip, volume, speed menu, captions from inline WebVTT, picture-in-picture, fullscreen and YouTube-style keyboard shortcuts.

Tags: video player chapters captions scrubber fullscreen keyboard
Dependencies: @base-ui/react(npm, opens in a new tab)lucide-react(npm, opens in a new tab)motion(npm, opens in a new tab)

Props

Other props pass through to the root element.

src*
string | VideoSource[]
One URL, or several sources in order of preference (e.g. WebM then MP4).
poster
string
Always set one: it is what people see before playing, and what thumbnails capture.
title
string
duration
number
Default 0
Length in seconds, shown on the poster before the video's metadata has loaded.
chapters
VideoChapter[]
Chapter starts in seconds. They split the scrubber into segments and name the hovered time.
captions
string
A WebVTT document (loaded through a Blob URL) or the URL of a .vtt file.
captionsLabel
string
Default "English"
captionsLang
string
Default "en"
defaultCaptions
boolean
Default false
rates
number[]
Default RATES
Choices in the speed menu.
autoHideMs
number
Default 2500
How long the controls stay up after the pointer stops while playing, in ms.
skip
number
Default 10
Seconds that J/L and the skip buttons jump.

Prop	Type	Default	Description
src*	string \| VideoSource[]	–	One URL, or several sources in order of preference (e.g. WebM then MP4).
poster	string	–	Always set one: it is what people see before playing, and what thumbnails capture.
title	string	–
duration	number	0	Length in seconds, shown on the poster before the video's metadata has loaded.
chapters	VideoChapter[]	–	Chapter starts in seconds. They split the scrubber into segments and name the hovered time.
captions	string	–	A WebVTT document (loaded through a Blob URL) or the URL of a .vtt file.
captionsLabel	string	"English"
captionsLang	string	"en"
defaultCaptions	boolean	false
rates	number[]	RATES	Choices in the speed menu.
autoHideMs	number	2500	How long the controls stay up after the pointer stops while playing, in ms.
skip	number	10	Seconds that J/L and the skip buttons jump.