Video Player
16:9 video player with an overlay play action, actions bar, volume, progress with timestamp preview, playback speed and full screen. Figma V8.0: Size (sm / md / lg) × Playing.
import
{ VideoPlayer } from "@pepulux/ui"Size: sm / md / lg — Playing: false
Without src the player runs in demo mode and simulates playback, so every state is previewable.
00:00
-08:24
00:00
-08:24
Playing: true — with timestamp indicator
Hover the progress bar while playing to see the scrub preview.
02:08
-06:16
02:08
-06:16
Overlay action and actions bar toggles
00:00
-08:24
Real video
Pass src to play a real file; the controls drive the underlying video element.
00:00
-08:24
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Video URL. Omit for the simulated demo player |
| poster | string | — | Still image behind the controls |
| previewSrc | string | — | Thumbnail for the timestamp indicator (defaults to poster) |
| size | "sm" | "md" | "lg" | "sm" | Figma Size — max width 320 / 560 / 720px and which controls show |
| actionsBar | boolean | true | Figma Actions bar — gradient control bar |
| overlayAction | boolean | true | Figma Overlay action — centered play button while paused |
| timestampIndicator | boolean | true | Scrub preview with time on progress hover (md, lg) |
| defaultPlaying | boolean | false | Figma Playing — initial state |
| defaultTime | number | 0 | Start position in seconds |
| duration | number | 504 | Length in seconds in demo mode (no src) |
| autoPlay / loop | boolean | — | Native behaviour |
| onPlayingChange | (playing: boolean) => void | — | Called when playback starts or stops |