'/%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}
DatosAlea Pro
MediaPlayer
Video y audio con controles al estilo Alea: reproducir, buscar con indicador de tiempo, retroceder y adelantar, volumen, velocidad, subtítulos, imagen en imagen y pantalla completa, con las teclas que la gente ya conoce.
import { MediaPlayer } from '@alea/pro';
Ejemplos
Video con subtítulos
Enfoca el reproductor y usa las teclas (Espacio, las flechas, J y L, M, F, C) o los controles. Los subtítulos vienen de archivos WebVTT en inglés y español.
Audio
kind="audio" es una barra compacta con el título, una portada y los mismos controles, para podcasts, notas de voz y avances.
%22%2F%3E%3C%2Fsvg%3E)
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
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 y audio con controles al estilo Alea: reproducir, buscar con indicador de tiempo, retroceder y adelantar, volumen, velocidad, subtítulos, imagen en imagen y pantalla completa. Las teclas habituales funcionan mientras tiene el foco (Espacio o K, flechas, J y L, M, F, C), y cada control es un botón o slider con nombre.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
srcobligatoria | string | - | El archivo multimedia. |
titleobligatoria | string | - | El título: da nombre al reproductor y se muestra sobre el audio. |
autoPlay | boolean | - | Se reproduce silenciado desde el inicio (los navegadores solo permiten la reproducción automática silenciada). Desactivado por defecto: no reproduzcas automáticamente con sonido. |
className | string | - | Clases extra. |
kind | "audio" | "video" | 'video' | video (por defecto) o audio (una barra compacta, sin imagen). |
loop | boolean | - | Vuelve a reproducirse al terminar. |
onEnded | (() => void) | - | Se llama cuando termina. |
onTimeUpdate | ((seconds: number) => void) | - | Se llama con el tiempo actual mientras se reproduce. |
overlay | ReactNode | - | Contenido extra sobre la esquina del video: una insignia, un punto de en vivo. |
poster | string | - | Una imagen que se muestra antes de reproducir el video, o como portada del audio. |
ratio | number | 16 | Proporción de ancho a alto del video. Por defecto 16 / 9. |
speeds | number[] | - | Las velocidades que se ofrecen. Por defecto de 0.5 a 2. |
subtitle | string | - | Una segunda línea para el audio: el artista, el programa. |
tracks | MediaTrack[] | - | Subtítulos (WebVTT). El video necesita subtítulos para ser accesible. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
kindaudiovideo- Estados
- Keyboard focusFocus insideHoverHover (CSS)
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.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- Atributos data
data-kind=audiodata-kind=videodata-idledata-full
Accesibilidad
- El reproductor es una región con nombre que recibe el foco; dentro funcionan las teclas habituales: Espacio o K reproducen y pausan, las flechas buscan y cambian el volumen, J y L saltan 10 segundos, M silencia, F pasa a pantalla completa, C activa o desactiva los subtítulos.
- Cada control es un botón con nombre; los sliders de posición y volumen dicen el tiempo ("1:23 de 4:56") y el nivel.
- Los subtítulos vienen de pistas WebVTT, y su botón dice si se van a activar o desactivar.
- Nada se reproduce solo con sonido: autoPlay empieza silenciado.
- Mientras el video se reproduce los controles se desvanecen, y cualquier tecla, foco o movimiento del puntero los trae de vuelta.
Teclado
| Tecla | Acción |
|---|---|
| Espacio o K | Reproduce o pausa |
| Izquierda / Flecha derecha | Retrocede o adelanta 5 segundos |
| J / L | Retrocede o adelanta 10 segundos |
| Arriba / Flecha abajo | Sube o baja el volumen |
| M | Silencia |
| F | Pantalla completa (video) |
| C | Activa o desactiva los subtítulos (video) |
| Inicio / Fin | Inicio o final |
Qué hacer y qué evitar
Hacer
- Pon subtítulos a todo video; pon una transcripción junto a todo audio.
- Usa una imagen de portada que muestre de qué trata el video.
- Deja la reproducción automática para bucles decorativos sin sonido.
Evitar
- No reproduzcas automáticamente con sonido.
- No ocultes los controles para siempre: la gente necesita pausar.
En Figma
MediaPlayer con Kind (Video, Audio) y los estados de la barra de controles.