build69
Sign inGet API key
build69  /  Components  /  Media & Files  /  VideoPlayer

VideoPlayer

v1.0.0Updated 26 Jul 2026

Themed <video> surface with an overlay control bar — play / pause, a seek scrubber with a buffered underlay, an elapsed / duration clock, optional volume and playback-rate controls, and fullscreen. Controls fade on idle during playback (or pin with controlsVisibility="always").

View source← Back to catalog

Preview

Live · 8 stories
DefaultOpen ↗
▸Why this is recommendedvideoplayermediaplayback+6

The default, out-of-the-box VideoPlayer.

Recommended for+14
  • ✓Recorded run / session playback
  • ✓Product demo & tutorial videos
  • ✓Any themed <video> needing custom, always-available controls
Tags+6
videoplayermediaplaybackscrubberfullscreenrecordingwebmmp4default
Features+4
  • Overlay controls that fade on idle playback (or pin) — the native bar cannot be themed or kept up
  • Seek scrubber with a buffered-range underlay + played fill
  • Elapsed / duration clock (m:ss, or h:mm:ss past an hour)
  • Optional volume (mute + slider) — drop it for silent screencasts (showVolume=false)
  • Optional playback-rate control (playbackRates)
  • Fullscreen
  • States: poster / empty before the first frame, loading, and an error surface with retry
  • Changeable src (resets playback), keyboard control (space/k, ←/→ seek, ↑/↓ volume, m, f, Home/End)
  • i18n labels prop (VideoPlayerLabels — every built-in string overridable)
Not recommended for−2
  • ✕Audio-only (use a dedicated audio player)
  • ✕Background / decorative video (use a bare muted looping <video>)
  • ✕Adaptive HLS/DASH streaming (needs a streaming engine)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "VideoPlayer" })

Usage

import { VideoPlayer } from '@/components/media/video-player';

<VideoPlayer src={recordingUrl} poster={posterUrl} showVolume={false} playbackRates={[1, 1.5, 2]} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
src

Video URL; changing it resets playback and reloads

string—
poster

Poster image shown before the first frame (and as the resting/empty backdrop)

string—
showVolume

Show the mute + volume controls. Set false for silent screencasts (default true)

boolean—
playbackRates

Offer these playback speeds via a speed menu (e.g. [0.5, 1, 1.5, 2]); omit for no speed control

number[]—
controlsVisibility

auto (default) fades the bar during idle playback and shows it when paused/hovered/focused; always pins it

'auto' | 'always'—
aspectRatio

Fixed aspect ratio (w/h); omit to derive from the video metadata

number—
labels

Override any built-in UI string (play/pause/seek/volume/speed/fullscreen/loading/error/retry/empty) for i18n

Partial<VideoPlayerLabels>—

Related

Platform docsAll componentsSource files