Todos los componentes (244)

Reproductor de vídeo

Más · VideoPlayer · .amset-video

Qué es y cuándo usarlo

Un vídeo con sus controles: la presentación de un producto, el vídeo de un curso, la grabación de una reunión. Los controles son propios por lo mismo que en el reproductor de audio: los del navegador cambian de uno a otro y en varios no se llega a la barra con el teclado.

Cuándo usarlo

Un vídeo que es contenido de la página: el de la ficha de un producto, el de una lección, el de un anuncio en la portada.
poster es la imagen de antes de reproducir y subtitle la línea pequeña bajo el título (de quién, cuándo).
tracks con las pistas de subtítulos en WebVTT: sale el botón de subtítulos y la tecla C los enciende y apaga.
aspectRatio para un cuadro que no es 16:9 (4 / 3, 1 / 1, 9 / 16 para un vertical).
muted con autoPlay para un vídeo de fondo que arranca solo: es lo único que los navegadores dejan arrancar sin pulsar.

Cuándo no

Un vídeo de YouTube o Vimeo: eso es un <iframe> suyo, con sus controles y su consentimiento de cookies.
Solo sonido: AudioPlayer.

Teclado: Tab pasa por el botón de reproducir, la barra de posición, el sonido, los subtítulos, la velocidad y la pantalla completa. Con el foco en cualquier parte del reproductor: Espacio o K reproduce y pausa, las flechas izquierda y derecha saltan cinco segundos, arriba y abajo mueven el volumen, M silencia, C enciende los subtítulos y F pone la pantalla completa. En la barra, las flechas van de segundo en segundo, Re Pág y Av Pág por tramos, e Inicio y Fin a los extremos.

Accesibilidad: title es obligatorio y nombra los botones («Reproducir Presentación del anillo Aurelia», «Posición en…»). La posición se anuncia en segundos y el volumen en tanto por ciento. Los subtítulos son pistas de verdad del <video>, las que lee el navegador. Si el vídeo no carga o no se deja reproducir, se dice con palabras (role="alert").

Aspecto fino: variables --amset-video-ratio (la proporción del cuadro), --amset-video-radius y --amset-video-cover-size (el botón grande del medio), y las clases amset-video, amset-video--playing, amset-video--fullscreen y amset-video__track.

Cómo se ve

Posición en Cómo embalamos un pedido

0:00 / 0:04

Volumen

<VideoPlayer
  src="/videos/embalaje.webm"
  title="Cómo embalamos un pedido"
  subtitle="Taller de Joyería Aurelia"
  poster={cartel}
  duration={4}
  aspectRatio="16/9"
  muted
/>

Props

Se importa con import { VideoPlayer } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`src`obligatoria	`string`	—
`title`obligatoria	`string`	Que se ve. Obligatorio: nombra el reproductor y sus botones.
`aspectRatio`	`string`	La proporcion del cuadro: `16 / 9` por defecto; `4 / 3`, `1 / 1`, `9 / 16` para un vertical.
`autoPlay`	`boolean`	Arranca solo. Solo funciona con `muted`, que es la regla de los navegadores.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`duration`	`number`	Duracion conocida de antemano, para no enseñar «–:––» hasta que cargue.
`loop`	`boolean`	Vuelve a empezar al terminar.
`muted`	`boolean`	Empieza sin sonido. Es lo unico que permite `autoPlay` en un navegador.
`onEnded`	`() => void`	—
`poster`	`string`	La imagen que se ve antes de darle a reproducir.
`subtitle`	`string`	La linea pequeña bajo el titulo: quien, cuando, de que.
`tracks`	`readonly VideoTrack[]`	Pistas de subtitulos en WebVTT. Con alguna, sale el boton de subtitulos.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

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

Cómo se cambia

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

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: