VideoPlayer
v1.0.5Updated 19 Oct 2026Themed <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").
Preview
Live · 9 stories▸Why this is recommendedvideoplayermediaplayback+6
The default, out-of-the-box VideoPlayer.
- ✓Recorded run / session playback
- ✓Product demo & tutorial videos
- ✓E-learning lessons that must reopen where the viewer stopped
- ✓Anything that saves and restores the playback position
- ✓Any themed <video> needing custom, always-available controls
- 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
- startAt: resume where the viewer left off — seconds seeked ONCE per source, and only when the metadata is available (loadedmetadata, or immediately if readyState >= 1). A currentTime write before metadata is silently discarded by the browser, which is why the seek must wait; changing startAt for the same src does not move a playing viewer, and a non-finite / <= 0 / at-or-past-duration value is ignored
- ref forwarded to the inner <video> (React 19 ref-as-prop) for anything the props do not cover — imperative currentTime / play() / pause() / picture-in-picture
- Changeable src (resets playback), keyboard control (space/k, ←/→ seek, ↑/↓ volume, m, f, Home/End)
- i18n labels prop (VideoPlayerLabels — every built-in string overridable)
- ✕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.
Usage
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
srcVideo URL; changing it resets playback and reloads
—posterPoster image shown before the first frame (and as the resting/empty backdrop)
—startAtSeconds to resume from. Seeked once per source, on loadedmetadata (a currentTime write before metadata arrives is discarded — in development the cached file hides this). Re-applied when src changes or Retry reloads; ignored when non-finite, <= 0, or at/past a known duration; changing it mid-playback for the same src does not re-seek
—refForwarded to the inner <video> element (null in the empty state) — imperative seeking, play/pause, picture-in-picture
—showVolumeShow the mute + volume controls. Set false for silent screencasts (default true)
—playbackRatesOffer these playback speeds via a speed menu (e.g. [0.5, 1, 1.5, 2]); omit for no speed control
—controlsVisibilityauto (default) fades the bar during idle playback and shows it when paused/hovered/focused; always pins it
—aspectRatioFixed aspect ratio (w/h); omit to derive from the video metadata
—labelsOverride any built-in UI string (play/pause/seek/volume/speed/fullscreen/loading/error/retry/empty) for i18n
—