acerca de HTML

Referencia de etiquetas

Etiqueta video en HTML: controles, formatos y subtítulos

La etiqueta <video> incorpora vídeo al documento y puede ofrecer controles de reproducción, una imagen previa y pistas de texto. Úsala para mostrar una demostración, una entrevista o una lección cuyo archivo puedes servir desde tu sitio. Por ejemplo, una biblioteca puede publicar un clip de bienvenida y permitir verlo, leer sus captions o consultar una transcripción sin iniciar la reproducción.

Ejemplo mínimo: reproductor, portada y captions

Descarga el vídeo de la visita, la portada JPEG y la pista española. Guarda los tres archivos en las rutas indicadas o cambia las URLs al copiarlos a tu sitio.

<video controls width="320" height="180"
  poster="/ejemplos/video/visita-portada.jpg"
  aria-label="Visita a la biblioteca">
  <source src="/ejemplos/track/visita.webm" type="video/webm">
  <track kind="captions" src="/ejemplos/track/visita-es.vtt"
    srclang="es" label="Español (con sonidos)">
  Tu navegador no admite el elemento video.
</video>
<p><a href="/ejemplos/track/visita.webm" download>Descargar vídeo</a></p>

Aparece un reproductor de 320 × 180 con una portada. Al reproducirlo, la imagen previa da paso al clip; el menú de subtítulos permite seleccionar español cuando la pista se carga y el navegador la admite. La apariencia de los controles varía. El caso práctico añade la transcripción que también debes ofrecer al publicar el clip.

Si quitas controls, dejas de solicitar esa interfaz; el navegador todavía puede ofrecerla. Sin JavaScript, Chromium conserva los controles, como recomienda el estándar para la interfaz del medio. Si retiras todo <video>, queda el enlace de descarga, pero no el reproductor integrado. El bloque de código de esta guía se muestra como texto: ejecútalo en tu propio documento de prueba.

Sintaxis y contexto válido

<video> tiene apertura y cierre. Es contenido incrustado y puede estar, por ejemplo, dentro de una sección o una figura. Con controls es además interactivo: no lo metas dentro de un enlace o un botón.

El modelo de contenido de video en HTML distingue dos formas:

  • Con src en <video>, van primero las pistas <track> y después el contenido alternativo permitido por el contexto del padre.
  • Sin src, van primero los <source>, después los <track> y finalmente ese contenido alternativo.

No combines src con hijos <source> ni anides <audio> o <video> dentro del elemento. src tiene prioridad en la selección del recurso; no crea una fuente adicional a las de los hijos.

El texto interior sirve para navegadores que no reconocen <video>. Un navegador que lo reconoce lo oculta aunque falle el archivo. Mantén la descarga y las alternativas textuales fuera del reproductor para que sigan disponibles.

Fuente, formatos y poster

El contenedor y el códec son cosas distintas: WebM o MP4 organizan los datos; los códecs codifican imagen y sonido. La extensión no garantiza reproducción. El clip entregado usa WebM con vídeo VP8 y sonido Opus. type="video/webm" pertenece a <source> y ayuda a elegir la fuente; no convierte el archivo. El servidor también debe responder con un tipo MIME adecuado.

Puedes ofrecer varios <source> con archivos equivalentes reales: el navegador considera los candidatos en orden. Comprueba cada archivo por separado antes de añadirlo; una URL inventada no aporta compatibilidad. La guía de contenedores de MDN explica la relación entre formato y códecs; la guía de source desarrolla la selección de fuentes.

poster apunta a una imagen representativa. La portada de este ejemplo es un fotograma del clip original. No es obligatorio y no sustituye el vídeo ni su alternativa accesible. Si lo retiras, el navegador podrá mostrar un fotograma cuando tenga datos; si la imagen falla, el archivo de vídeo todavía puede reproducirse.

Caso práctico: visita con transcripción y descarga

Los recursos anteriores forman una animación original de unos diez segundos, compartida con la guía de <track>: dos voces sintetizadas en español y una campana generada. Ana habla alrededor del segundo 1, la campana suena cerca del 4,5 y Luis responde cerca del 6. La imagen muestra a ambos junto a la entrada de una biblioteca.

Este documento completo usa los tres archivos locales, conserva su proporción y deja transcripción y descarga fuera de <video>. Sírvelo por HTTP desde tu sitio para probar la carga de WebVTT; no necesita JavaScript.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visita a la biblioteca</title>
  <style>
    .visita-video {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <h1 id="video-visita-titulo">Visita a la biblioteca</h1>
  <video class="visita-video" controls playsinline preload="metadata"
    width="640" height="360"
    src="/ejemplos/track/visita.webm"
    poster="/ejemplos/video/visita-portada.jpg"
    aria-labelledby="video-visita-titulo">
    <track kind="captions" src="/ejemplos/track/visita-es.vtt"
      srclang="es" label="Español (con sonidos)" default>
    Tu navegador no admite el elemento video.
  </video>
  <p><a href="/ejemplos/track/visita.webm" download>Descargar vídeo WebM</a></p>
  <h2>Transcripción completa</h2>
  <p>La imagen muestra a Ana y Luis junto a la entrada de la biblioteca.</p>
  <p>Ana: La visita empieza a las diez.</p>
  <p>[Suena una campana]</p>
  <p>Luis: Gracias. Nos vemos en la entrada.</p>
</body>
</html>

width y height reservan un área de proporción 16:9; el CSS la reduce cuando falta espacio y mantiene la altura proporcional. Evita fijar una anchura y una altura CSS incompatibles. aria-labelledby da al reproductor el nombre del título visible. default propone los captions iniciales según preferencias e interfaz.

El archivo visita-es.vtt, guardado como UTF-8 y servido como text/vtt, contiene:

WEBVTT

00:01.000 --> 00:03.900
Ana: La visita empieza a las diez.

00:04.500 --> 00:05.600
[Suena una campana]

00:06.000 --> 00:09.500
Luis: Gracias. Nos vemos en la entrada.

Cómo comprobar el caso

  1. Reproduce y pausa con los controles. Llega a ellos con Tab y comprueba su operación por teclado; en Chromium, Espacio permite reproducir y pausar. Activa español en el menú y revisa las frases y la campana en sus intervalos.
  2. Prueba una pantalla estrecha: el clip debe caber sin deformarse. Revisa también un móvil real; playsinline sugiere reproducir dentro de la página, pero no fuerza una interfaz idéntica en todos los dispositivos.
  3. Desactiva JavaScript y recarga: reproducción nativa, captions, transcripción y descarga deben seguir disponibles.
  4. Retira <track> o cambia su URL por una inexistente: el vídeo sigue reproduciéndose, pero pierde los captions disponibles. La transcripción conserva diálogo y campana.
  5. Cambia la URL del vídeo por una inexistente: falla la reproducción y esa descarga, aunque la portada pueda seguir visible. La transcripción permanece legible. Retira después <video> entero: siguen el texto y el enlace exterior. Restaura las URLs para publicar.

Atributos y reproducción

Los atributos de video en MDN incluyen opciones específicas y otras compartidas con <audio>:

  • src: URL del vídeo cuando no utilizas <source>.
  • controls: solicita los controles nativos.
  • poster: URL de la imagen previa.
  • width y height: dimensiones del área en píxeles CSS, escritas como enteros, no porcentajes.
  • loop: vuelve al principio al terminar.
  • muted: establece el silencio inicial, que el usuario puede cambiar.
  • playsinline: sugiere reproducción dentro del área del elemento; su ausencia tampoco obliga a pantalla completa.

preload="none" sugiere no precargar; metadata, obtener información básica; auto o un valor vacío, permitir una carga mayor. Sin atributo decide el navegador. Esta sugerencia de precarga no garantiza cuánto se descarga.

autoplay solicita comenzar automáticamente y puede prevalecer sobre preload. Las políticas de reproducción automática pueden bloquearlo: muted no garantiza autoplay en toda plataforma. En estos ejemplos la persona decide cuándo iniciar.

crossorigin="anonymous" usa CORS sin credenciales hacia otro origen; use-credentials las incluye. El servidor debe permitir la petición correspondiente. El modo CORS del medio importa para recursos remotos y pistas de otro origen; aquí todos los archivos comparten origen y no se necesita el atributo.

controls, autoplay, loop, muted y playsinline son booleanos: su presencia los activa. autoplay="false" sigue solicitando reproducción automática; elimina el atributo para desactivarla.

id, class, lang y los atributos ARIA son globales. max-width y height: auto son CSS; currentTime, volume y play() son propiedades o métodos de JavaScript. No escribas volume="0.5" como atributo HTML.

Subtítulos y accesibilidad

¿Cómo agrego subtítulos? Añade <track> con src hacia un WebVTT válido, srclang y un label claro. kind="subtitles" sirve para transcribir o traducir diálogo; kind="captions" incluye también hablantes y sonidos relevantes, como la campana. Consulta la guía de track para la sintaxis y la explicación de captions de WAI para preparar su contenido.

Una pista no resuelve todas las necesidades. Ofrece una transcripción completa y fácil de encontrar. Si una acción visual esencial no se entiende por el sonido, prepara audiodescripción o una versión con esa información narrada. Declarar kind="descriptions" no garantiza una locución automática en todos los reproductores. La guía de descripción visual de WAI explica esas alternativas.

Errores frecuentes y etiquetas relacionadas

¿Por qué aparece el reproductor, pero no funciona? Revisa la URL y respuesta HTTP, el tipo MIME, el contenedor y los códecs reales, y después silencio y volumen. Un 404 no se arregla añadiendo autoplay. Si faltan controles, comprueba controls y que CSS no oculte el elemento.

¿Por qué no aparecen los captions? Selecciona la pista; comprueba respuesta HTTP y text/vtt, origen/CORS, encabezado WEBVTT y tiempos. Reproduce dentro de un intervalo con texto. Renombrar un SRT como VTT no lo convierte.

Para sonido sin imagen, usa audio. <source> ofrece archivos candidatos y <track> aporta texto sincronizado; ninguno sustituye al reproductor. Un enlace con a basta si solo quieres abrir o descargar el archivo. <video> no incrusta la página de un servicio externo: necesita un recurso multimedia que puedas utilizar con autorización.

Compatibilidad y fuentes

Consultado el 4 de octubre de 2026: MDN considera video ampliamente disponible. El soporte del elemento no asegura todos los códecs ni la misma presentación de controles, captions o pantalla completa.

Los dos ejemplos se comprobaron en Chromium 153 con y sin JavaScript, a anchuras de 375 y 1280 píxeles. Esa revisión de presentación móvil no sustituye una prueba en teléfono real. Las fuentes enlazadas fijan las reglas de HTML y las alternativas accesibles; prueba los archivos y controles en los dispositivos de tu audiencia.