VideoPlayer

Usage

VideoPlayer is self-managing: give it a real src and an accessible label, and it handles the loading skeleton, the keyboard map and the error fallback itself. The native control bar (on by default) handles play, seek, volume and fullscreen;aspectRatio fixes the box shape and poster shows a frame before first load.

import { VideoPlayer } from '@epasslive/design-system'

// Default 16:9 with poster
<VideoPlayer
  src="/media/trailer.mp4"
  label="Event trailer"
  poster="/media/trailer.jpg"
/>

// Square social embed (1:1), muted loop
<VideoPlayer
  src={clip.url}
  label={clip.title}
  aspectRatio="1:1"
  muted
  loop
/>

Keyboard

Honest notes (current limitations)

• Autoplay policy rejection degrades to paused, not error. A NotAllowedError from play() (browser blocking ungestured playback) leaves a healthy video paused on its poster — the error state is reserved for genuine media failures. Autoplay with muted is safe to attempt; unmuted autoplay will typically just stay paused. No demo or story here uses autoplay.
• c captions toggle is near-inert. The key toggles textTracks[0], but only affects tracks embedded in the source file. The component renders no <track> element and offers no tracks prop — for ordinary sources, c is a no-op. WCAG 1.2.2 remains the consumer's responsibility.
• controls={false} leaves keyboard-only control with no visible play CTA. The molecule renders no play button. Keep controls on unless you provide your own chrome.
• No custom scrub bar exists. Seeking is the native control bar or ← / → keys only. The molecule has no progress API and no timecode — live time and seeking are the browser's.
• Hardcoded playsInline + preload="metadata". Both are fixed behavior consumers cannot change via props.
• The error fallback reflects genuine media failures. The third preview above uses a 404 source on purpose so the inline role="alert" fallback renders for the right reason — never by autoplay (a policy-blocked autoplay now stays paused instead).

Props