'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data displayAlea Pro
MediaPlayer
Video and audio with controls in the Alea look: play, seek with a time readout, skip back and forward, volume, speed, captions, picture in picture and full screen, with the keys people already know.
import { MediaPlayer } from '@alea/pro';
Examples
Video with captions
Focus the player and use the keys (Space, the arrows, J and L, M, F, C), or the controls. Captions come from WebVTT files in English and Spanish.
Audio
kind="audio" is a compact bar with the title, an artwork and the same controls, for podcasts, voice notes and previews.
%22%2F%3E%3C%2Fsvg%3E)
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-bg…--alea-border…--alea-focus…--alea-surface-raised…--alea-text…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-6…
Radius
--alea-radius-lg…--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-base…--alea-motion-ease-emphasized…
Other
--alea-media-backdrop…--alea-media-scrim…--alea-on-media…
Props
MediaPlayer props
Video and audio with controls in the Alea look: play, seek with a time readout, skip back and forward, volume, speed, captions, picture in picture and full screen. The usual keys work while it has focus (Space or K, arrows, J and L, M, F, C), and every control is a named button or slider.
| Prop | Type | Default | Description |
|---|---|---|---|
srcrequired | string | - | The media file. |
titlerequired | string | - | The title: names the player and shows above audio. |
autoPlay | boolean | - | Plays muted from the start (browsers only allow muted autoplay). Off by default: don't autoplay with sound. |
className | string | - | Extra class names. |
kind | "audio" | "video" | 'video' | video (default) or audio (a compact bar, no picture). |
loop | boolean | - | Plays again at the end. |
onEnded | (() => void) | - | Called when it ends. |
onTimeUpdate | ((seconds: number) => void) | - | Called with the current time as it plays. |
overlay | ReactNode | - | Extra content over the video corner: a badge, a live dot. |
poster | string | - | An image shown before video plays, or as artwork for audio. |
ratio | number | 16 | Width to height ratio for video. Default 16 / 9. |
speeds | number[] | - | The speeds offered. Default 0.5 to 2. |
subtitle | string | - | A second line for audio: the artist, the show. |
tracks | MediaTrack[] | - | Captions and subtitles (WebVTT). Video needs captions to be accessible. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
kindaudiovideo- States
- Keyboard focusFocus insideHoverHover (CSS)
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-player.alea-player-art.alea-player-media.alea-player-overlay.alea-player-big.alea-player-bar.alea-player-titles.alea-player-title.alea-player-subtitle.alea-player-seek.alea-player-controls.alea-player-time- Data attributes
data-kind=audiodata-kind=videodata-idledata-full
Accessibility
- The player is a named region that takes focus; the usual keys work inside it: Space or K play and pause, the arrows seek and change the volume, J and L skip 10 seconds, M mutes, F goes full screen, C toggles captions.
- Every control is a named button; the seek and volume sliders say the time ("1:23 of 4:56") and the level.
- Captions come from WebVTT tracks, and their button says whether they will turn on or off.
- Nothing autoplays with sound: autoPlay starts muted.
- While video plays the controls fade, and any key, focus or pointer move brings them back.
Keyboard
| Key | Does |
|---|---|
| Space or K | Plays or pauses |
| Left / Right arrow | Back or forward 5 seconds |
| J / L | Back or forward 10 seconds |
| Up / Down arrow | Volume up or down |
| M | Mutes |
| F | Full screen (video) |
| C | Captions on or off (video) |
| Home / End | Start or end |
Do and don't
Do
- Give every video captions; give audio a transcript next to it.
- Use a poster image that shows what the video is about.
- Keep autoplay for silent, decorative loops.
Don't
- Don't autoplay with sound.
- Don't hide the controls for good: people need to pause.
In Figma
MediaPlayer with Kind (Video, Audio) and the control bar states.