Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Components
  2. Video Player
  3. Usage

Video player

Usage

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
Do
  • 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.
Related components
  • Button and Slider, which the bar composes.
  • Empty state for a failed load.
Previous
User Menu / Accessibility
Next
Video player / Accessibility
On this page
Overview
When to use
When not to use
Content guidelines
Behavior and states
Best practices
Accessibility
Related components