Docs ejecutables de HTML: Etiqueta video

Q: ¿Cómo pongo un vídeo en HTML?

Usa . El atributo controls muestra el botón de reproducción, la línea de tiempo y el volumen del navegador. Sin él, el vídeo muestra su primer fotograma (o el póster) y el usuario no puede iniciarlo.

Q: ¿Cómo pongo una miniatura a un vídeo?

Usa el atributo poster con la URL de una imagen: . La imagen se muestra hasta que el vídeo empieza a reproducirse.

Q: ¿Cómo añado subtítulos a un vídeo HTML?

Añade un dentro del vídeo. El archivo usa el formato WebVTT, y el navegador muestra un botón de subtítulos en sus controles.

Q: ¿Cómo hago un vídeo responsive?

Pon width: 100% y height: auto en el CSS (o max-width: 100%). El vídeo escala con su contenedor y mantiene su proporción.

Cómo poner un vídeo

Apunta el elemento <video> a un archivo de vídeo y añade controls para que el lector pueda reproducirlo:

<video src="movie.mp4" controls width="640"></video>

controls muestra el reproductor propio del navegador: reproducir y pausar, una línea de tiempo, el volumen y la pantalla completa. Sin él, el vídeo se queda quieto. Esta vista previa no puede cargar archivos de vídeo, así que los ejemplos de esta página alimentan el elemento con una pequeña animación de canvas dibujada por un script; los atributos funcionan exactamente igual que con un archivo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Como la fuente es una emisión en directo y no un archivo, aquí no se puede arrastrar la línea de tiempo y no hay una duración fija. Con un .mp4 real, el mismo reproductor tiene una barra de avance completa.

Atributos de video

Atributo	Qué hace
`controls`	Muestra los controles del reproductor del navegador
`autoplay`	Empieza a reproducirse en cuanto puede (en la práctica, solo con `muted`)
`muted`	Empieza con el sonido desactivado
`loop`	Vuelve a empezar desde el principio al terminar
`playsinline`	Se reproduce en la página en el iPhone en lugar de pasar a pantalla completa
`poster="thumb.jpg"`	Imagen que se muestra antes de que se reproduzca el vídeo
`preload`	`none`, `metadata` (solo tamaño y duración) o `auto` (el navegador decide cuánto descargar)
`width`, `height`	Tamaño en píxeles; poner los dos reserva el espacio antes de que cargue el vídeo

Autoplay, muted y loop

Los navegadores bloquean los vídeos que empiezan solos con sonido. Un vídeo silenciado sí puede reproducirse automáticamente, y así funcionan los vídeos de fondo y los clips cortos en bucle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Los cuatro atributos funcionan juntos: autoplay para empezar, muted para que el navegador lo permita, loop para un clip y playsinline para que los iPhone no lo abran a pantalla completa. El vídeo con sonido que se reproduce solo no solo está bloqueado, también es un problema para quienes usan lectores de pantalla, cuya voz queda tapada. Si un clip dura más de cinco segundos, da a la gente una forma de pausarlo.

Imagen de póster y preload

poster muestra una imagen antes de que se reproduzca el vídeo, como una miniatura. Aquí el vídeo no tiene ninguna fuente, así que el póster es lo único que se ve:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Con preload="none" el navegador no descarga nada hasta que el lector pulsa reproducir, y el póster evita que el espacio parezca vacío. Usa preload="metadata" cuando quieras que la duración se vea antes de reproducir. Sin póster, la mayoría de los navegadores muestran el primer fotograma en cuanto lo han cargado.

Formatos y alternativas con source

En lugar de src, puedes listar varios archivos con elementos <source>. El navegador reproduce el primero que admita:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 con vídeo H.264 se reproduce en todos los navegadores actuales, así que es la opción segura cuando solo tienes un archivo. El atributo type permite al navegador saltarse los formatos que no puede reproducir sin descargarlos. El texto del final solo aparece en los navegadores que no admiten <video> en absoluto.

Subtítulos con track

<track kind="captions"> carga un archivo WebVTT, un archivo de texto plano con líneas temporizadas. El navegador añade un botón de subtítulos a sus controles y dibuja el texto sobre el vídeo:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Los subtítulos ayudan a las personas sordas o con dificultades auditivas, a quien ve el vídeo sin sonido y a quien sigue un vídeo en un segundo idioma. Añade default a una pista para mostrarla sin hacer clic. Un archivo de subtítulos de otro dominio necesita cabeceras CORS y crossorigin en el vídeo.

Estilo y control con JavaScript

Un vídeo es un elemento reemplazado, como una imagen: width: 100% con height: auto lo hace responsive, y object-fit decide cómo llena una caja de otra forma. JavaScript tiene play(), pause(), currentTime, volume y eventos como play, pause y ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() devuelve una promesa que se rechaza cuando el navegador bloquea la reproducción (por ejemplo, un autoplay sin silenciar), así que el código de producción debería capturarla con catch. Crear tus propios controles es opcional; los controls integrados son accesibles con el teclado y están traducidos, algo que los botones propios tienen que reproducir. Para vídeos alojados en YouTube o Vimeo, insertas su reproductor con un iframe.

Errores comunes

Autoplay sin muted. El navegador lo bloquea. Añade muted y playsinline.
Olvidar controls. Salvo que crees los tuyos, el lector no tiene forma de iniciar el vídeo.
Sin width ni height. La página salta cuando carga el vídeo. Pon los dos y escala con CSS.
Archivos enormes. Comprime los vídeos para la web y usa preload="none" o "metadata" en los vídeos que están más abajo en la página.
Sin subtítulos en vídeos con diálogo. Añade un <track kind="captions">.

Preguntas frecuentes

¿Cómo pongo un vídeo en HTML?

Usa <video src="movie.mp4" controls width="640"></video>. El atributo controls muestra el botón de reproducción, la línea de tiempo y el volumen del navegador. Sin él, el vídeo muestra su primer fotograma (o el póster) y el usuario no puede iniciarlo.

¿Por qué no funciona el autoplay de mi vídeo?

Los navegadores bloquean la reproducción automática con sonido. Añade muted junto a autoplay, y playsinline para que los iPhone lo reproduzcan en la página en lugar de a pantalla completa: <video autoplay muted loop playsinline>.

¿Qué formato de vídeo debo usar para la web?

MP4 con vídeo H.264 se reproduce en todos los navegadores actuales, así que es la opción segura por defecto. Puedes listar primero un archivo WebM más ligero con <source> y dejar que el navegador elija el primer formato que admita.

¿Cómo pongo una miniatura a un vídeo?

Usa el atributo poster con la URL de una imagen: <video poster="thumb.jpg" controls>. La imagen se muestra hasta que el vídeo empieza a reproducirse.

¿Cómo añado subtítulos a un vídeo HTML?

Añade un <track kind="captions" src="captions.vtt" srclang="es" label="Español"> dentro del vídeo. El archivo usa el formato WebVTT, y el navegador muestra un botón de subtítulos en sus controles.

¿Cómo hago un vídeo responsive?

Pon width: 100% y height: auto en el CSS (o max-width: 100%). El vídeo escala con su contenedor y mantiene su proporción.

Conceptos relacionados