Reference

Every prop, part and keyboard shortcut.

API

Each player takes every native prop of the element it wraps, except controls. These are the extra props.

classNamestring: Classes for the <video> element itself.
frameClassNamestring: Classes for the outer frame. Use this for size, radius and placement.
tracksVideoTrack[]: WebVTT caption or subtitle files: { src, label, srcLang, kind?, default? }.
loaderMediaSourceLoader: Adapter for sources the browser cannot play natively, such as HLS.
metadataMediaInfo: Title, artist, album and artwork for lock screens and OS media controls.
persistKeystring: Remember volume, mute and speed in localStorage under this key.
tooltipsboolean: Small labels with their shortcut over the controls on hover and focus. On by default.

titleReactNode: The main line beside the controls.
descriptionReactNode: The muted line after the title.
artworkstring: Cover image beside the controls and in OS media controls.
showSpeedboolean: Show a playback speed toggle, for podcasts and voice notes.
tooltipsboolean: Same as on VideoPlayer. On by default.
frameClassNamestring: Classes for the outer frame. className targets the <audio> element.
loaderMediaSourceLoader: Same as on VideoPlayer.
metadataMediaInfo: Overrides the metadata built from title, description and artwork.
persistKeystring: Same as on VideoPlayer.

Everything is exported from components/ui/media.tsx.

MediaRoot: Owns the store. Exposes data-paused, data-started, data-waiting, data-idle, data-fullscreen.
MediaVideo / MediaAudio: The native element. Every native prop passes through.
MediaSurface: Full-bleed click target. First tap on touch reveals controls.
MediaControls: Reveals on pointer activity, pause, or keyboard focus.
MediaSeek / MediaVolume: Accessible sliders with scrubbing, buffering and keyboard steps. MediaVolume takes orientation="vertical" for a popover.
MediaTime: current, duration or remaining. toggle lets a click switch to remaining time and back.
MediaButton: The base button the others are built from. Use it for your own controls.
Media*Button: MediaPlayButton, MediaMuteButton, MediaCaptionsButton, MediaFullscreenButton, MediaPictureInPictureButton, MediaPlaybackRateButton.
MediaSettings: Speed and caption track menu.
MediaCaptions: Renders the active cue with your styles instead of the browser's.
MediaLoading / MediaErrorMessage: Buffering indicator and a retryable error state.
useMedia(selector): Subscribe to any slice of state. Re-renders only when it changes.
useMediaStore(): Imperative access: play, seek, setVolume, setTextTrack and more.

Shortcuts apply to the focused player only, so several can live on one page.