Cómo poner videos en HTML: etiqueta video y ejemplos

¿Quieres poner un video en una página HTML? Puedes hacerlo directamente con la etiqueta <video>, sin instalar reproductores, complementos ni tecnologías como Flash.

En esta guía aprenderás cómo insertar videos en HTML, hacerlos adaptables a celulares, agregar controles, una imagen de portada, reproducción automática y subtítulos.

Cómo poner un video en HTML

La forma más sencilla de insertar un video es utilizar la etiqueta <video> con el atributo controls:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Tu navegador no puede reproducir este video.
</video>

Debes cambiar video.mp4 por la dirección donde se encuentra el archivo que quieres mostrar.

Por ejemplo, si el video está guardado dentro de una carpeta llamada videos, el código sería:

<video controls>
  <source src="/videos/ejemplo.mp4" type="video/mp4">
  Tu navegador no puede reproducir este video.
</video>

El atributo controls muestra los botones para reproducir, pausar, controlar el volumen, avanzar y utilizar la pantalla completa.

Cómo hacer que el video sea adaptable a celulares

No es recomendable establecer únicamente un ancho fijo porque el reproductor podría salirse de la pantalla en dispositivos móviles.

Puedes crear un video adaptable utilizando el siguiente código:

<video controls
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">
  <source src="/videos/ejemplo.mp4" type="video/mp4">
  Tu navegador no puede reproducir este video.
</video>

El estilo max-width: 100% evita que el reproductor supere el ancho de la pantalla, mientras que height: auto conserva las proporciones del video.

Cómo insertar diferentes formatos de video

La etiqueta <source> permite ofrecer el mismo video en diferentes formatos. El navegador probará los archivos en el orden indicado y reproducirá el primero que pueda utilizar.

<video controls
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">
  <source src="/videos/ejemplo.webm" type="video/webm">
  <source src="/videos/ejemplo.mp4" type="video/mp4">

  Tu navegador no puede reproducir este video.
  <a href="/videos/ejemplo.mp4">Descargar el video</a>.
</video>

Actualmente, MP4 con video H.264 y audio AAC suele ofrecer una compatibilidad amplia. WebM puede utilizarse como formato alternativo.

La compatibilidad no depende solamente de la extensión del archivo. También intervienen los códecs utilizados para comprimir el video y el audio.

Cómo agregar una imagen de portada

El atributo poster permite mostrar una imagen antes de que el usuario reproduzca el video:

<video controls
       poster="/imagenes/portada-video.jpg"
       preload="metadata"
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">
  <source src="/videos/ejemplo.mp4" type="video/mp4">
  Tu navegador no puede reproducir este video.
</video>

Utiliza una portada con las mismas proporciones del video para evitar cambios repentinos en el diseño de la página mientras carga el reproductor.

Cómo reproducir un video automáticamente

Para intentar que un video comience a reproducirse automáticamente, utiliza los atributos autoplay, muted y playsinline:

<video autoplay
       muted
       loop
       playsinline
       poster="/imagenes/portada-video.jpg"
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">
  <source src="/videos/ejemplo.mp4" type="video/mp4">
</video>

Los navegadores normalmente bloquean la reproducción automática de videos con sonido. Por esta razón, el atributo muted suele ser necesario.

Aun con estos atributos, la reproducción automática puede ser bloqueada por la configuración del navegador, el modo de ahorro de datos o las preferencias del usuario. No debes depender de que siempre funcione.

Cómo agregar subtítulos a un video HTML

Los subtítulos mejoran la accesibilidad y permiten entender el contenido cuando el usuario no puede activar el sonido. Para añadirlos se utiliza la etiqueta <track> y un archivo en formato WebVTT.

<video controls
       preload="metadata"
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">
  <source src="/videos/ejemplo.mp4" type="video/mp4">

  <track
    kind="captions"
    src="/subtitulos/espanol.vtt"
    srclang="es"
    label="Español"
    default>

  Tu navegador no puede reproducir este video.
</video>

El archivo espanol.vtt puede contener información como la siguiente:

WEBVTT

00:00:00.000 --> 00:00:04.000
Bienvenido a este tutorial.

00:00:04.500 --> 00:00:08.000
En este video aprenderás a utilizar HTML.

Además de subtítulos, es recomendable proporcionar una transcripción escrita cuando el contenido hablado sea importante.

Atributos de la etiqueta video

Valores del atributo preload

El atributo preload puede tener tres valores:

• none: solicita que el archivo no se descargue hasta que el usuario decida reproducirlo.
• metadata: carga solamente información básica, como la duración y las dimensiones.
• auto: permite que el navegador descargue anticipadamente una parte o todo el video.

Para la mayoría de las páginas, preload="metadata" ofrece un buen equilibrio entre funcionamiento y velocidad.

<video controls preload="metadata">
  <source src="/videos/ejemplo.mp4" type="video/mp4">
</video>

El atributo funciona como una recomendación. El navegador puede decidir cargar una cantidad diferente de datos dependiendo de la conexión y de la configuración del usuario.

Cómo poner un video en WordPress

Si utilizas WordPress, no es necesario escribir todo el código manualmente.

1. Abre la entrada o página donde quieres colocar el video.
2. Presiona el botón para agregar un bloque.
3. Busca el bloque Video.
4. Selecciona Subir, Biblioteca de medios o Insertar desde una URL.
5. Selecciona el archivo y guarda la publicación.

Si necesitas atributos especiales, puedes utilizar un bloque de HTML personalizado y pegar uno de los ejemplos anteriores.

Cómo insertar un video de YouTube

La etiqueta <video> necesita la dirección directa de un archivo multimedia. No puedes colocar la dirección normal de una página de YouTube dentro del atributo src.

Para insertar un video de YouTube en WordPress:

1. Copia la dirección del video.
2. Pégala en una línea independiente dentro del editor.
3. WordPress creará automáticamente el reproductor.

También puedes utilizar el bloque específico de YouTube. Si estás trabajando directamente con HTML, utiliza el código de inserción proporcionado por la plataforma.

Consejos para optimizar videos en una página web

• Comprime el archivo antes de subirlo.
• Utiliza una resolución adecuada al tamaño en el que se mostrará.
• Incluye una imagen de portada optimizada.
• Evita la reproducción automática si no es necesaria.
• Utiliza preload="metadata" o preload="none".
• No insertes demasiados videos grandes en una misma página.
• Añade subtítulos y una transcripción.
• Utiliza HTTPS tanto para la página como para los archivos multimedia.

Los archivos de video pueden ser muy pesados. Si tienes muchos visitantes o videos de larga duración, considera utilizar un servicio especializado o una red de distribución de contenido en lugar de alojarlos directamente en un servidor pequeño.

Por qué no se reproduce mi video HTML

Si el reproductor aparece pero el video no funciona, revisa lo siguiente:

• La dirección escrita en src debe ser correcta.
• El archivo debe existir y ser accesible públicamente.
• La página y el video deben utilizar HTTPS.
• El servidor debe enviar el tipo MIME adecuado.
• El formato y los códecs deben ser compatibles con el navegador.
• El nombre del archivo debe respetar mayúsculas y minúsculas.
• Un archivo alojado en otro dominio puede necesitar permisos CORS.

Ejemplo completo de video en HTML

El siguiente código reúne las opciones más recomendables para un video normal:

<video controls
       preload="metadata"
       poster="/imagenes/portada-video.jpg"
       width="1280"
       height="720"
       style="max-width: 100%; height: auto;">

  <source src="/videos/ejemplo.webm" type="video/webm">
  <source src="/videos/ejemplo.mp4" type="video/mp4">

  <track
    kind="captions"
    src="/subtitulos/espanol.vtt"
    srclang="es"
    label="Español"
    default>

  Tu navegador no puede reproducir el video.
  <a href="/videos/ejemplo.mp4">Descargar el archivo</a>.
</video>

Preguntas frecuentes

¿Es necesario utilizar Flash para reproducir videos?

No. Los navegadores actuales reproducen contenido multimedia directamente mediante la etiqueta <video>. Flash dejó de ser necesario y ya no es compatible con los navegadores modernos.

¿Cuál es el mejor formato para un video HTML?

MP4 con video H.264 y audio AAC suele ofrecer una compatibilidad amplia. También puedes proporcionar una versión WebM como alternativa.

¿Por qué no funciona autoplay?

Los navegadores bloquean normalmente la reproducción automática de contenido con sonido. Añade muted y playsinline, aunque la configuración del usuario todavía puede impedirla.

¿Se puede insertar un video sin mostrar controles?

Sí. Basta con no incluir el atributo controls, pero debes proporcionar otra forma accesible para iniciar, detener o controlar la reproducción.

¿Puedo utilizar una URL de YouTube en la etiqueta video?

No. Debes utilizar el código de inserción de YouTube o el bloque correspondiente de WordPress, ya que la URL normal no apunta directamente al archivo multimedia.

Conclusión

Para poner un video en HTML únicamente necesitas la etiqueta <video> y la dirección del archivo. Sin embargo, también conviene hacerlo adaptable, incluir controles, optimizar el peso y proporcionar subtítulos.

Con los ejemplos anteriores puedes insertar videos compatibles con celulares y computadoras sin depender de complementos externos.

Referencias: HTML Living Standard y documentación de MDN sobre la etiqueta video.