VideoPlayer
/mediaVideoPlayerPropsPreview
Props
12| Prop | Type | Default |
|---|---|---|
autoPlay Starts on its own and muted, like a feed. | boolean | false |
className | string | — |
defer Do not open the file until someone presses play. A grid of 24 cards mounted 12 `video` elements, each opening a range request only to read its header. With it, stopped there is no `video` at all: the poster is an `<img>`, and the clip mounts on the first play. Without a poster it mounts when it comes into view (200 px early) rather than on load. | boolean | false |
duration The clip's seconds, already known. Saves opening the file to write the total. | number | null | null |
fill Cover the frame instead of measuring what the clip measures. It is the grid's business, not the player's. | boolean | false |
label What a screen reader says of the clip. | string | — |
labels | Partial<PlayerControlsLabels> | — |
loop | boolean | false |
maxHeight Caps the frame: a grid caps it, a room lets it run. | string | number | — |
onPlaying Says it started or stopped, so whoever frames it can step aside. | ((playing: boolean) => void) | — |
poster The still frame before it starts. Without one the frame is the sunken surface; `null` says so on purpose. | string | null | — |
src required | string | — |
Slot props
6Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
barProps The control bar over the frame. | BoxSlotProps | — |
fullscreenProps The full-screen button in the corner. | ActionIconProps | — |
playProps The big play button over the middle, only while stopped. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
surfaceProps The `<video>` itself. `src`, `poster` and the handlers the player needs are its own. | Omit<Omit<DetailedHTMLProps<VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "ref">, "src" | "poster"> | — |
trackProps The seek track, a real `range`. | Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> | — |
volumeProps The volume slider inside its popover. | Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> | — |
Also accepts
On top of its own props, this component forwards these groups.