Prepared Docs

Prepared Docs

⌘K

    Loading navigation…

User

  1. Components
  2. Video Player
  3. API and Development

Video player

API and Development

View Source
Submit Issue

Import from @prepared911/ui/video-player.

VideoPlayer props

NameDefaultDescription
srcMedia URL. A change resets load state.
copyRequired labels. LocalizedMessage from @prepared911/tool-localization. Includes seekValueText and timeSeparator.
controlstrueCustom bar. false uses native controls.
playingControlled playback.
playerIdOpaque id. When set, this player joins the single-active registry.
activePlayerIdControlled id of the player that should be the only one playing.
volume0 to 1. The bar opens it in a popover.
mutedMutes the element.
playbackRate1 is real time.
pipRequests Picture-in-Picture.
preloadVideoPreload.
tracksCaptions and other text tracks.
showTimeStampstrueClock in the bar.
timeDisplayModeCombinedTimeDisplayMode.
blurEnables blur. true starts blurred.
onBlurChange(blurred: boolean) => void.
hideBlurButtonfalseHides the toggle and still applies blur.
fullscreenShows the fullscreen control.
onSnapshotReceives a JPEG data URL. Omitted, the button is hidden. Disabled while blurred.
showPlayOverlayfalseLarge play control before the first start.
disableContextMenufalseCancels the video context menu.
onPlayingChangePlay or pause through media-core, including the single-active registry.
classNameClasses on the root.

Video takes copy with label, errorTitle, and retry, plus the media props above except the bar-only ones.

Ref

VideoRef exposes getInternalPlayer, getCurrentTime, getDuration, seekTo, play, pause, setVolume, setMuted, and toggleMuted. Times are seconds. The playback methods take an optional change-details argument.

What changed from @prepared911/ui-video-player

copy is required and now includes seekValueText and timeSeparator. width and height strings are gone. Volume is a popover. Snapshot and Picture-in-Picture refuse while the frame is blurred. playerId joins the shared single-active registry. The full list is in the component contract.

Previous

Video player / Accessibility

Next

Virtualized List / Usage

On this page

VideoPlayer props
Ref
What changed from @prepared911/ui-video-player