Video player

A React component in Beamline's Content & display category.

A video player on the native <video> element: title bar with an external link and close, centre play with ±10 s, scrub, time, volume, speed, captions drawn in the system's type, picture-in-picture and fullscreen; full keyboard control, and loading, buffering, ended and error states.

Use it for

Product videos, walkthroughs and recordings inside an app or docs page.

Not for

Background or decorative video (a muted, looping <video> without controls).
Live streams that need adaptive bitrate (use a streaming player with HLS or DASH and style it on tokens).

Anatomy

title bar (title, external link, close)
centre controls (−10 s, play/pause, +10 s)
captions
control bar: play, scrub, time, volume, speed, captions, picture-in-picture, fullscreen
buffering spinner
error panel

Variants

0: hide: skip · volume · speed · captions · pip · fullscreen
1: link (any external page)
2: poster

States

loading (skeleton)
paused
playing (controls fade after 2.5 s of stillness; any movement, focus or key brings them back)
buffering
ended (replay)
error (cannot play, with retry)
muted
captions on/off
fullscreen
picture-in-picture

Keyboard

Space or K: play/pause
← / →: 5 s back/forward; J / L: 10 s
↑ / ↓: volume
M: mute
C: captions
F: fullscreen
Home / End: start / end
Keys work while focus is anywhere in the player except a slider, which keeps its own arrows

Motion

Controls use the current motion tokens; managed/OS reduction settles decoration immediately. The 2.5-second idle timeout remains reading time.

Props

Prop	Type	Default	Description
`src / poster`	`string`	—
`title`	`ReactNode`	—
`captions`	`VideoCaption[]`	—	{ src, srcLang, label, default? } WebVTT tracks; C cycles through them and off.
`link`	`{ href, label }`	—	An external page for the video, opened in a new tab.
`onClose`	`() => void`	—	Shows a close button.
`label`	`string`	—	Accessible name; the title by default.
`autoPlay / muted / loop`	`boolean`	—
`autoFocus`	`boolean`	—	Focus the player on mount so its keys work at once.
`playing / onPlayingChange`	`boolean / (playing) => void`	—	Controlled play state.
`hide`	`("skip" \| "volume" \| "speed" \| "captions" \| "pip" \| "fullscreen")[]`	—
`loading`	`boolean`	—	A skeleton while the source is not known yet.
`className / videoClassName`	`string`	—
`crossOrigin`	`"anonymous" \| "use-credentials"`	—	Only for captions on another origin (that origin must send CORS headers).
`classNames`	`VideoPlayerClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—
`videoRef / videoStyle`	`Ref<HTMLVideoElement> / CSSProperties`	—

Import

import { VideoPlayer } from "@/components/video/video";

Get it

Video player is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent