To source

Atrium // Elements

a-video

Unstyled control elements for a Video.js player.

The a-video-* elements are unstyled controls for a Video.js player. Each element reads the player state and calls its actions through the Video.js PlayerController, so it only needs to be placed somewhere inside a <video-player>. They are used by the Video component.

ElementDescription
a-video-playToggles playback. Slots play and pause.
a-video-muteToggles mute. Slots mute and unmute.
a-video-fullscreenToggles fullscreen of the <media-container>. Slots enter and exit.
a-video-timeDisplays the current, duration or remaining time.
a-video-seekSeek slider, extends a-range.
a-video-volumeVolume slider, extends a-range.

Accessibility

  • Buttons: The button elements get role="button" and are focusable. They activate on click, Enter and Space. The accessible name comes from the content of the currently shown slot, so include text (visually hidden if needed).
  • Sliders: Seek and volume have role="slider". Name them with the label attribute. ←/→ seek by key-step seconds (default 5) or change the volume by key-step (default 0.1).
  • Hotkeys: Key presses handled by the elements don't trigger Video.js <media-hotkey> bindings.

Usage

Requires @videojs/html. Register a player and a container, then compose the controls:

import "@videojs/html/video/player";
import "@videojs/html/ui/container";
import "@atrium-ui/elements/video";
<video-player>
  <media-container>
    <video src="video.mp4" playsinline></video>

    <a-video-play>
      <span slot="play">Play</span>
      <span slot="pause">Pause</span>
    </a-video-play>

    <a-video-time type="current"></a-video-time> / <a-video-time type="duration"></a-video-time>

    <a-video-seek label="Seek"></a-video-seek>

    <a-video-mute>
      <span slot="mute">Mute</span>
      <span slot="unmute">Unmute</span>
    </a-video-mute>

    <a-video-volume label="Volume"></a-video-volume>

    <a-video-fullscreen>
      <span slot="enter">Fullscreen</span>
      <span slot="exit">Exit fullscreen</span>
    </a-video-fullscreen>
  </media-container>
</video-player>

Auto hiding controls

Wrap the controls in Video.js <media-controls>. It gets a data-visible attribute while the controls should be shown:

import "@videojs/html/ui/controls";
media-controls:not([data-visible]) {
  opacity: 0;
}

Customization

  • Buttons: Style the elements directly, they are the buttons. Use the slots to swap icons per state.
  • Sliders: Seek and volume use the a-range custom properties and parts.
  • Time: a-video-time renders plain text with tabular numbers.

VideoPlayElement

Toggles playback. Shows the "play" slot while paused and the "pause" slot while playing.

Example

<a-video-play>
  <span slot="play">Play</span>
  <span slot="pause">Pause</span>
</a-video-play>

Attributes

Name Type Default value Description

VideoMuteElement

Toggles mute. Shows the "mute" slot while audible and the "unmute" slot while muted.

Example

<a-video-mute>
  <span slot="mute">Mute</span>
  <span slot="unmute">Unmute</span>
</a-video-mute>

Attributes

Name Type Default value Description

VideoFullscreenElement

Toggles fullscreen of the

. Shows the "enter" or "exit" slot.

Example

<a-video-fullscreen>
  <span slot="enter">Fullscreen</span>
  <span slot="exit">Exit fullscreen</span>
</a-video-fullscreen>

Attributes

Name Type Default value Description

VideoTimeElement

Displays the current time, duration or remaining time of the video.

Example

<a-video-time type="current"></a-video-time> / <a-video-time type="duration"></a-video-time>

Attributes

Name Type Default value Description
type undefined undefined

Which time to display.

VideoSeekElement

Seek slider for the video timeline. The value is the progress from 0 to 1. Styled like

through its css custom properties and parts.

Example

<a-video-seek></a-video-seek>

Attributes

Name Type Default value Description
disabled undefined undefined

Disabled state of the range.
keyStep undefined undefined

Seconds to seek with the arrow keys.
label undefined undefined

Accessible label of the slider.
max undefined undefined

Maximum value of the range.
min undefined undefined

Minimum value of the range.
step undefined undefined

Step value of the range.
value undefined undefined

The current value of the range.

VideoVolumeElement

Volume slider from 0 to 1. Shows 0 while muted and unmutes when changed. Styled like

through its css custom properties and parts.

Example

<a-video-volume></a-video-volume>

Attributes

Name Type Default value Description
disabled undefined undefined

Disabled state of the range.
keyStep undefined undefined

Volume change with the arrow keys.
label undefined undefined

Accessible label of the slider.
max undefined undefined

Maximum value of the range.
min undefined undefined

Minimum value of the range.
step undefined undefined

Step value of the range.
value undefined undefined

The current value of the range.

References