Prepared Docs

Overview

VideoPlayer from @prepared911/ui/video-player plays a recorded video. Video is the same element without the bar. Pass copy for every label, including seekValueText and timeSeparator. Times on the ref and on onDurationChange are seconds. The clock shows m:ss, or h:mm:ss at an hour.

Playback and the control row are the same media-core and media-transport parts AudioPlayer uses. Pass playerId when this player should pause other registered players. Volume in the bar is a popover.

When to use

An operator reviews a recorded caller video, a screen recording, or a clip attached to an incident.
The frame must be blurred until someone chooses to reveal it.
The recording needs captions, a snapshot, fullscreen, or Picture-in-Picture.

When not to use

Live call audio. Use the audio players.
A static image. Use Image.
A progress value that is not media. Use Progress.

Content guidelines

Put every control name in copy. The strings are LocalizedMessage from @prepared911/tool-localization. seekValueText receives the spoken elapsed and total. timeSeparator sits between them.
Do not put a media URL, a phone number, or a person's name in playerId or track ids.

Behavior and states

Blur. Pass blur to show the toggle. blur={true} starts blurred and resets when src changes. Snapshot and Picture-in-Picture stay disabled while blurred. Blur does not mute audio.
Fullscreen. fullscreen shows the control. The control toggles fullscreen on the player root in that element's document.
Native controls. controls={false} leaves the browser chrome and hides the bar.
One playing player. Set playerId to join the page-wide registry. Starting this player pauses every other registered player. Omit playerId and players do not pause each other.
Load failure. The player shows copy.errorTitle and a Retry button.

Best practices

Supply captions in tracks when the recording has speech.
Keep copy next to the player so a translator can see every control.

Don't

Log src, a track URL, or a snapshot data URL.
Use the player for a live stream. This component is recorded video.

Accessibility

The root is a named group. The picture is one tab stop when the custom bar is showing: Space and Enter toggle playback, Left and Right seek five seconds, M toggles mute, and F toggles fullscreen when that control is shown. Space on the seek slider also toggles playback. Volume opens a popover. See Accessibility.

Button and Slider, which the bar composes.
Empty state for a failed load.

Accessibility / Testing with Screen Readers

Video player / Accessibility

Overview

When to use

An operator reviews a recorded caller video, a screen recording, or a clip attached to an incident.
The frame must be blurred until someone chooses to reveal it.
The recording needs captions, a snapshot, fullscreen, or Picture-in-Picture.

When not to use

Live call audio. Use the audio players.
A static image. Use Image.
A progress value that is not media. Use Progress.

Content guidelines

Put every control name in copy. The strings are LocalizedMessage from @prepared911/tool-localization. seekValueText receives the spoken elapsed and total. timeSeparator sits between them.
Do not put a media URL, a phone number, or a person's name in playerId or track ids.

Behavior and states

Blur. Pass blur to show the toggle. blur={true} starts blurred and resets when src changes. Snapshot and Picture-in-Picture stay disabled while blurred. Blur does not mute audio.
Fullscreen. fullscreen shows the control. The control toggles fullscreen on the player root in that element's document.
Native controls. controls={false} leaves the browser chrome and hides the bar.
One playing player. Set playerId to join the page-wide registry. Starting this player pauses every other registered player. Omit playerId and players do not pause each other.
Load failure. The player shows copy.errorTitle and a Retry button.

Best practices

Supply captions in tracks when the recording has speech.
Keep copy next to the player so a translator can see every control.

Don't

Log src, a track URL, or a snapshot data URL.
Use the player for a live stream. This component is recorded video.

Accessibility

Button and Slider, which the bar composes.
Empty state for a failed load.

Accessibility / Testing with Screen Readers

Video player / Accessibility