All components (244)

Video player

More · VideoPlayer · .amset-video

What it is and when to use it

A video with its controls: a product presentation, a course video, the recording of a meeting. The controls are its own for the same reason as in the audio player: the browser's change from one to another and in several the bar cannot be reached with the keyboard.

When to use it

A video that is page content: the one on a product page, the one of a lesson, the one of an announcement on the home page.
poster is the image before playing and subtitle the small line under the title (whose, when).
tracks with the subtitle tracks in WebVTT: the subtitles button appears and the C key turns them on and off.
aspectRatio for a frame that is not 16:9 (4 / 3, 1 / 1, 9 / 16 for a vertical one).
muted with autoPlay for a background video that starts on its own: it is the only thing browsers let start without a press.

When not to

A YouTube or Vimeo video: that is their <iframe>, with their controls and their cookie consent.
Sound only: AudioPlayer.

Keyboard: Tab goes through the play button, the position bar, the sound, the subtitles, the speed and full screen. With focus anywhere in the player: Space or K plays and pauses, the left and right arrows skip five seconds, up and down move the volume, M mutes, C turns the subtitles on and F goes full screen. In the bar, the arrows go second by second, Page Up and Page Down by stretches, and Home and End to the ends.

Accessibility: title is required and names the buttons ("Play Aurelia ring presentation", "Position in…"). The position is announced in seconds and the volume as a percentage. The subtitles are real tracks of the <video>, the ones the browser reads. If the video does not load or is not allowed to play, it is said with words (role="alert").

Fine appearance: variables --amset-video-ratio (the proportion of the frame), --amset-video-radius and --amset-video-cover-size (the big button in the middle), and the classes amset-video, amset-video--playing, amset-video--fullscreen and amset-video__track.

What it looks like

Position in How we pack an order

0:00 / 0:04

Volume

<VideoPlayer
  src="/videos/embalaje.webm"
  title="How we pack an order"
  subtitle="Aurelia Jewellery workshop"
  poster={cartel}
  duration={4}
  aspectRatio="16/9"
  muted
/>

Props

Import it with import { VideoPlayer } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`src`required	`string`	—
`title`required	`string`	What is being watched. Required: it names the player and its buttons.
`aspectRatio`	`string`	The proportion of the frame: `16 / 9` by default; `4 / 3`, `1 / 1`, `9 / 16` for a vertical one.
`autoPlay`	`boolean`	Starts on its own. It only works with `muted`, which is the browsers’ rule.
`className`	`string`	Merged with the library classes; it does not replace them.
`duration`	`number`	Duration known beforehand, so as not to show "–:––" until it loads.
`loop`	`boolean`	Starts again when it ends.
`muted`	`boolean`	Starts without sound. It is the only thing that allows `autoPlay` in a browser.
`onEnded`	`() => void`	—
`poster`	`string`	The image seen before pressing play.
`subtitle`	`string`	The small line under the title: who, when, what about.
`tracks`	`readonly VideoTrack[]`	Subtitle tracks in WebVTT. With any, the subtitles button appears.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-video-ratio`	`16 / 9`
`--amset-video-radius`	`var(--amset-radius-lg)`
`--amset-video-cover-size`	`4rem`

How to change it

.amset-video {
  --amset-video-ratio: ...;
  --amset-video-radius: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: