Etiqueta HTML <video>
La etiqueta HTML5 <video> se usa para incrustar video en documentos HTML. Tutorial W3Docs con sintaxis y ejemplos prácticos.
La etiqueta <video> es uno de los elementos HTML5. Se utiliza para incrustar un reproductor de video en un documento HTML. Esta página explica cómo añadir un video, proporcionar múltiples formatos para compatibilidad entre navegadores, agregar subtítulos para accesibilidad, y los detalles sobre la reproducción automática y los atributos poster, preload y loop.
Existen 3 formatos de video ampliamente compatibles para el elemento <video>: MP4/MPEG-4, WebM y Ogg. Dado que ningún formato único funciona en todos los navegadores, generalmente se proporcionan varios archivos usando elementos <source> anidados (o un único atributo src). Los archivos de video grandes se comprimen y descomprimen mediante códecs:
- MP4/MPEG-4 — video H.264 con audio AAC. El formato más compatible en general.
- WebM — video VP8 o VP9 con audio Vorbis u Opus.
- Ogg — video Theora con audio Vorbis.
El elemento <video> es un elemento reemplazado con un display: block por defecto. Para controlar cómo se rellena el marco, use las propiedades CSS object-fit y object-position. Para supervisar el progreso de descarga y reproducción, use los atributos de eventos multimedia.
Puede añadir subtítulos o leyendas con el elemento <track> y el formato WebVTT (explicado más abajo). El mismo elemento también puede reproducir archivos solo de audio, aunque <audio> es la mejor opción para contenido exclusivamente de sonido.
Sintaxis
La etiqueta <video> viene en pares. El contenido se escribe entre las etiquetas de apertura (<video>) y cierre (</video>).
Ejemplo de la etiqueta HTML <video> con los atributos controls, muted y src:
Ejemplo de la etiqueta HTML <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Múltiples fuentes y texto alternativo
Cuando se listan varios elementos <source>, el navegador reproduce el primero que puede decodificar e ignora el resto. Por lo tanto, ordénelos de más preferido a menos preferido: normalmente WebM primero (más pequeño) y luego MP4 (más compatible) como alternativa fiable. El atributo type permite al navegador omitir un formato que no puede reproducir sin descargar el archivo.
Cualquier contenido colocado entre <video> y </video> (distinto de <source> y <track>) se muestra únicamente cuando el navegador no puede reproducir ninguna de las fuentes. Úselo para un mensaje alternativo y un enlace de descarga.
Establezca siempre width y height (o fije el tamaño en CSS) para que el navegador reserve espacio antes de que se cargue el video. Esto evita el desplazamiento acumulativo del diseño (CLS), donde el contenido salta cuando aparece el reproductor.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls playsinline>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<!-- Shown only if no source can be played -->
Your browser doesn't support HTML video.
<a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
</video>
<p>Some information about video</p>
</body>
</html>Los atributos controls, autoplay, loop y muted son atributos booleanos; no toman ningún valor. Su sola presencia activa la función.
Subtítulos y leyendas con <track>
Para accesibilidad, añada un elemento <track> que apunte a un archivo WebVTT (.vtt). El atributo kind indica al navegador cómo tratar la pista de texto:
subtitles— traducciones del diálogo para espectadores que no entienden el idioma.captions— transcripción del diálogo más sonidos no verbales importantes (música, efectos de sonido), para espectadores sordos o con dificultades auditivas.descriptions— descripción de texto de los elementos visuales, pensada para ser leída en voz alta para espectadores que no pueden ver el video.chapters— títulos de capítulos usados para navegar por el contenido multimedia.
Proporcionar leyendas para video pregrabado satisface el Criterio de Éxito 1.2.2 de WCAG 2.1 (Leyendas). Use srclang para establecer el idioma de la pista y default para activar una pista automáticamente.
<video width="320" height="240" controls>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<track default kind="captions" srclang="en" label="English"
src="/build/videos/arcnet.io(7-sec).vtt" />
</video>Un archivo WebVTT mínimo tiene este aspecto:
WEBVTT
00:00.000 --> 00:04.000
Welcome to the demo video.
00:04.000 --> 00:07.000
[upbeat music playing]Reproducción automática (y por qué necesita muted)
Para evitar anuncios intrusivos, la mayoría de los navegadores bloquean la reproducción automática cuando hay sonido. Por ello, autoplay solo funciona de forma fiable cuando el video también está muted:
<video autoplay muted loop controls playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Los medios con reproducción automática pueden ser un serio problema de accesibilidad: pueden distraer a los usuarios, interferir con los lectores de pantalla y provocar problemas a personas con trastornos vestibulares. Mantenga los clips de reproducción automática en silencio, breves, y prefiera que los usuarios inicien la reproducción ellos mismos. Incluya siempre controls para que el video pueda pausarse.
El atributo poster
poster establece una imagen de marcador de posición que se muestra antes de que el video se reproduzca (o hasta que se hayan cargado suficientes datos). Sin él, los navegadores muestran el primer fotograma, que a menudo está en blanco.
<video width="320" height="240" controls poster="/build/videos/cover.jpg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>El atributo preload
preload indica cuánto contenido debe cargar el navegador antes de la reproducción. Es solo una sugerencia: el navegador puede ignorarla (y se ignora cuando se establece autoplay).
<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>El atributo loop
loop reinicia el video automáticamente cada vez que termina. Es más útil para clips de fondo cortos y ambientales, que normalmente se combinan con autoplay muted.
<video loop autoplay muted playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Atributos
| Atributos | Valor | Descripción |
|---|---|---|
| autoplay | autoplay | Especifica que el video comenzará a reproducirse automáticamente en cuanto esté listo. |
| controls | controls | Muestra los controles que permiten al usuario controlar la reproducción del video, incluyendo volumen, búsqueda y pausa/reanudación. |
| height | píxeles | Establece la altura del reproductor de video. |
| loop | loop | Especifica que el video volverá a empezar cada vez que termine. |
| muted | muted | Especifica que el video estará inicialmente silenciado. |
| poster | URL | Establece una imagen que se mostrará mientras el video se descarga o hasta que el usuario pulse el botón de reproducción. |
| preload | auto, metadata, none | Indica cuánto contenido cargar antes de la reproducción (consulte los valores a continuación). Se ignora cuando autoplay está habilitado. |
| src | URL | Establece la URL del video incrustado. Se puede usar un elemento <source> en su lugar. |
| width | píxeles | Establece el ancho del reproductor. |
El atributo preload acepta tres valores:
- none — el video no debe precargarse.
- metadata — solo se obtienen metadatos como la duración y las dimensiones.
- auto — el archivo de video completo puede descargarse.
La etiqueta <video> también admite los Atributos Globales y los Atributos de Evento.
Elementos relacionados
<source>— especifica uno de varios archivos multimedia para<video>o<audio>.<track>— añade leyendas, subtítulos o capítulos como una pista WebVTT.<audio>— incrusta contenido exclusivamente de sonido.