Cómo insertar un vídeo en HTML con controles y subtítulos

Para insertar un vídeo en HTML, utiliza <video> e indica el archivo mediante src o una etiqueta source. Añade controls para que el visitante pueda reproducirlo, pausarlo y controlar el sonido.

<video controls width="800">
  <source src="videos/presentacion.mp4" type="video/mp4">
  Tu navegador no permite reproducir este vídeo.
</video>

El ejemplo necesita un archivo real en la carpeta indicada. Cambiar el nombre de un archivo a .mp4 no lo convierte a ese formato: también deben ser compatibles su contenedor y sus códecs.

Ejemplo de vídeo responsive con portada

Este bloque conserva la proporción del vídeo y limita su tamaño al ancho disponible:

<video class="video-demo" controls preload="metadata"
       poster="imagenes/portada-video.webp"
       width="1280" height="720" playsinline>
  <source src="videos/presentacion.mp4" type="video/mp4">
  <a href="videos/presentacion.mp4">Abrir el vídeo</a>
</video>
<style>
  .video-demo {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    border-radius: 16px;
    background: #0f172a;
  }
</style>

poster muestra una imagen antes de la reproducción. Los atributos de ancho y alto ayudan a reservar espacio. preload="metadata" expresa la preferencia de cargar inicialmente metadatos; el navegador decide cómo atenderla.

Qué atributos necesitas realmente

• controls: muestra los controles nativos del navegador.
• poster: define la imagen de presentación.
• preload: orienta la precarga; admite none, metadata y auto.
• playsinline: solicita reproducción dentro de la página cuando el dispositivo lo permita.
• muted: inicia el vídeo silenciado.
• loop: repite la reproducción.

Son atributos booleanos los que se activan con su presencia, como controls o autoplay. Escribir autoplay="false" no los desactiva: debes retirar el atributo.

Cómo añadir subtítulos con track

Los subtítulos se pueden cargar desde un archivo WebVTT. Guarda un archivo subtitulos-es.vtt y añádelo dentro del vídeo:

<track kind="subtitles" src="videos/subtitulos-es.vtt"
       srclang="es" label="Español" default>

Este sería un contenido mínimo del archivo:

WEBVTT

00:00:00.000 --> 00:00:03.000
Bienvenido al tutorial de HTML.

Si el texto incluye sonidos e información necesaria para personas sordas, utiliza la categoría de pista captions cuando corresponda. Ofrece también una transcripción cuando resulte necesaria para comprender el contenido.

¿Cómo reproducir un vídeo automáticamente?

Para una pieza decorativa puedes utilizar autoplay muted loop playsinline, pero la reproducción automática depende de las políticas del navegador y las preferencias del usuario. No la des por garantizada. Evita sonido inesperado y ofrece un control para pausar el movimiento si continúa.

Vídeo propio o YouTube: qué cambia

video reproduce archivos multimedia compatibles. Una URL normal de YouTube no es un archivo MP4: para ese servicio necesitas su reproductor insertado con el código que proporciona la plataforma, normalmente basado en iframe.

Por qué no se reproduce el vídeo

• La ruta no coincide con el archivo o contiene una diferencia de mayúsculas.
• El códec no es compatible aunque la extensión parezca correcta.
• El servidor devuelve una página de error en lugar del archivo.
• Se carga contenido HTTP dentro de una página HTTPS.
• El navegador bloquea la reproducción automática.

Abre la dirección del archivo por separado y revisa la pestaña Red de las herramientas de desarrollo. Prueba además en móvil y con una conexión lenta.

Preguntas frecuentes

¿Necesito JavaScript para mostrar los controles?

No. controls proporciona un reproductor nativo. JavaScript permite añadir funciones personalizadas.

¿Puedo usar varios formatos?

Sí, añadiendo distintas etiquetas source. El navegador intentará utilizar una fuente compatible.

Si quieres preparar la imagen de portada, consulta cómo insertar imágenes en HTML. Continúa con más ejercicios en la ruta de HTML.

Referencia técnica: documentación de video en MDN.