VideoPlayer

A native video player with a complete toolbar, an elastic minimal timeline, and a poster that opens a focused viewing dialog.

Installation

pnpm add github:ahmadassaf/design-system

import { VideoPlayer } from '@gaudi/design-system/core/VideoPlayer';

Usage

import { VideoPlayer } from '@gaudi/design-system/core/VideoPlayer';
<VideoPlayer src='/media/film.webm' poster='/media/film.webp' title='A short film'  tracks={[{ src: '/media/film.en.vtt', srcLang: 'en', label: 'English', default: true }]} />

Examples

Playground

Minimal & elastic timeline

Poster to dialog

Empty, error & source changes

Browser controls

API

Accessibility

All controls have accessible names. Space or Enter activates focused buttons; the seek and volume sliders support arrow keys, Home and End. Captions use native text tracks; provide captions for speech and meaningful audio. Dialog traps focus, closes with Escape, and restores focus to its poster. Touch controls stay visible, and reduced motion removes elastic movement.

Notes

• autoPlay, defaultMuted, and defaultVolume are initial preferences applied when a source mounts or its dialog opens. Updating them does not restart playback or directly update the active video’s muted state or volume. Use the native ref for subsequent programmatic changes.
• Only documented video props are supported; arbitrary native attributes such as crossOrigin are not forwarded. Cross-origin media setup belongs to the host integration. className and style apply to the outer player wrapper.
• The custom toolbar supports finite-duration files. Unknown or infinite durations disable seeking. Use nativeControls for live streams or device-specific playback features.
• Picture-in-picture and fullscreen appear only when supported. Their state follows browser events, and rejected requests show a recoverable message. Support depends on the browser, operating system, and embedding permissions.
• Custom controls remain visible. Below a 640px player width they flow below the video; larger standard players place them over the frame. Enabling captions keeps the controls below so they cannot cover the text. Minimal controls stay below the frame at every width.
• The Skiper 67, 91, and 97 references informed the interactions. This implementation uses Gaudi primitives and native media APIs; it does not load remote examples or copy registry source.

Related