Cómo usar las etiquetas <video> y <audio> en HTML: guía completa con ejemplos prácticos

Incorporar contenido multimedia ya no es opcional: los usuarios esperan ver clases, demos, podcasts y fragmentos de audio directamente en la web sin reproductores externos. Ahí es donde entran en juego las etiquetas <video> y <audio>.

Ambas etiquetas forman parte del estándar HTML5 y permiten reproducir archivos de video y audio sin depender de Flash ni plugins adicionales. Son livianas, compatibles y muy fáciles de integrar. En mi caso, uso <video> para mostrar mis cursos dentro de una app de academia y <audio> para algunos podcasts que complemento con las clases.

Anteriormente aprendiste a usar la etiqueta datalist HTML

¿Para qué sirven video y audio?

Sirven para incrustar contenido multimedia de forma nativa en cualquier navegador moderno.
No necesitas librerías extra, solo configurarlas bien.

Ventajas reales de usar reproductores nativos

• No requieren terceros (YouTube, Vimeo, Spotify…).
• Tienes control total sobre la experiencia.
• Puedes personalizar atributos, estilos y funcionalidad.
• Mejor rendimiento en apps y paneles privados.

Las etiquetas <video> y <audio> en HTML etiquetas que permiten mostrar contenido multimedia a nuestra web mediante videos y audios de distintos formatos:

• MP4
• WebM
• Ogg
• MP3
• Ogg
• Wav

Esto último es lo que realmente las hace especial y esto se debe a que cada navegador soporta algunos de los formatos navegador listados anteriormente.

Una de los grandes características que trae HTML5 consigo es la inclusión de contenido multimedia como audios y vídeos.

Primero hablaremos sobre la etiqueta <video>; como veremos en esta entrada, ambas etiquetas (<video> y <audio>) tienen comportamientos, definiciones y atributos parecidos y de ahí el porqué de escribir una sola entrada para ambas etiquetas.

1.0 La etiqueta video: sintaxis, atributos y ejemplos

Para poder emplear la etiqueta <video> esta debe estar acompañada de algunos atributos y otras etiquetas hijas como veremos a continuación.

<video src="clase1.mp4" controls></video>

1.1 Atributos para cargar un vídeo

Se emplean los atributos width y height para especificar el ancho y largo que queramos que tenga el vídeo.

Además podemos especificar el atributo controls para indicar que muestre los controles como pausa, reproducción, volumen...:

Y el atributo src para indicar la URL fuente (vídeo).

<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg"> 
Tu navegador no soporta la etiqueta video.
<video>

En el código HTML anterior especificamos el mismo vídeo en dos formatos diferentes para que pueda ser visualizado en los navegadores con soporte de vídeo MP4 y OGG; además se especifica que el vídeo espacio de visualización del vídeo será de 320x240 píxeles y que presente controles.

Lo ideal es agregar el mayor número de formatos para garantizar la reproducción en los navegadores.

En el caso de que sea un navegador anticuado como Internet Explorer 8 se mostraría el siguiente mensaje:

"Tu navegador no soporta la etiqueta video."

En el siguiente enlace verás una tabla con los formatos de video soportados por navegador: HTML <video> Tag.

Atributos esenciales:

• controls → muestra los controles del reproductor.
• autoplay → reproduce automáticamente (suele requerir muted).
• muted → arranca sin sonido.
• loop → repite el video al terminar.
• poster → imagen previa del video.
• preload → puede ser none, metadata o auto.
• width/height → tamaño del reproductor.

1.2 Otros atributos de la etiqueta video

Puedes ver el resto de los atributos en el siguiente enlace: HTML <video> Tag.

1.3 Múltiples fuentes con source y compatibilidad

Puedes definir distintos formatos para un vídeo:

<video controls poster="portada-curso.jpg">
 <source src="clase1.mp4" type="video/mp4">
 <source src="clase1.webm" type="video/webm">
 Tu navegador no soporta el elemento video.
</video>

Esto asegura que si un formato no funciona, el otro sí.

1.4 Buenas prácticas

• El tamaño del video era un factor crítico. Si el archivo pesa demasiado, la experiencia empeora en móvil.
• El atributo preload="metadata" es ideal: permite mostrar duración y poster sin cargar todo el archivo.
• Puedes definir un poster personalizado para hacer que los vídeos se vean mucho más profesionales.

2.0 La etiqueta audio

Ya entendida el funcionamiento del elemento anterior, ahora vamos con la etiqueta <audio> la cual presenta un especificaciones similar al de la etiqueta <video> (aparte de cargar audios en vez de vídeos); también cuenta con múltiples soportes de audio dependiendo del navegador los cuales puedes ver en el siguiente enlace: HTML Tag

<audio src="episodio1.mp3" controls></audio>

La etiqueta <audio> también cuenta con los mismos atributos vistos anteriormente y se deben de especificar al menos un audio:

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  Tu navegador no soporta la etiqueta audio.
</audio>

2.1 Atributos claves

• controls
• loop
• autoplay
• preload (muy importante en podcasts)
• Formatos recomendados para podcasts
• MP3 → máximo soporte.
• OGG → buena compresión, soporte amplio.
• WAV → calidad muy alta, pero archivos pesados (no recomendado para producción).

El preload="none" es la mejor opción: la app carga rápido y el usuario solo descarga el audio cuando realmente quiere escucharlo.

2.2 Optimización para apps móviles y carga rápida

• Mantén bitrates moderados (96–128 kbps) para podcasts.
• Evita archivos WAV.
• Controla tamaños; un episodio de 40 MB puede arruinar la experiencia.
• Usa títulos y descripciones accesibles para lectores de pantalla.

2.3 Subtítulos, transcripciones y accesibilidad

Cómo usar <track> para subtítulos

<video controls>
 <source src="clase1.mp4" type="video/mp4">
 <track src="subtítulos.vtt" kind="subtitles" srclang="es" label="Español">
</video>

Los subtítulos puede ser vitales dependiendo del contenido y siempre es buena idea definirlos.

2.4 Recomendaciones de accesibilidad para audio y video

• Incluye transcripciones.
• Usa colores y contrastes correctos si personalizas controles.
• No fuerces autoplay sin muted.

2.5 Consejos de rendimiento y compatibilidad

• Cómo elegir el formato adecuado
  • MP4 (H.264) → más compatible para video.
  • WebM (VP8/VP9) → excelente en Chrome/Android.
  • Ogg → alternativa libre.
  • MP3 → estándar absoluto para audio.
• Fallback para navegadores antiguos
  • Siempre deja un texto interno dentro de <video> o <audio>.
    Los navegadores viejos mostrarán ese mensaje.
• Hosting, tamaño de archivos y carga móvil
  • Optimiza videos con HandBrake o FFmpeg.
  • Mantén videos entre 720p y 1080p según el tipo de curso.
  • Evita subir archivos mayores a 200–300 MB.
  • Usa CDNs cuando sea posible.

Ejemplos completos listos para copiar

Ejemplo de video optimizado

<video controls preload="metadata" poster="clase-intro.jpg" width="800">
 <source src="clase-intro.mp4" type="video/mp4">
 <source src="clase-intro.webm" type="video/webm">
 Tu navegador no puede reproducir este video.
</video>

Ejemplo de reproductor de podcast

<audio controls preload="none">
 <source src="podcast-episodio1.mp3" type="audio/mpeg">
 Tu navegador no puede reproducir este audio.
</audio>

Aplicando los Media Queries en los vídeos con HTML5

Recursos pesados como vídeos nos lleva hacia uno de los mayores líos que nos podemos encontrar al momento de optimizar el tamaño de nuestra web.

Por una parte tenemos cada vez monitores más grandes con una alta resolución para reproducir lo que sea y por otra parte queremos que nuestro sitio cargue lo más rápidamente para que el internauta pueda tener una buena experiencia con nuestra web (a menos a lo que se refiere a la carga del sitio como tal); estas dos escenarios parecen imposible de coexistir juntos, pero podemos lograr un término medio entre los dos con ayuda de los Media Queries.

Los Media Queries de CSS en HTML para los vídeos

De la mano de los Media Queries que aplicamos en CSS para adaptar secciones de nuestra web para distintos tamaños de pantalla vienen los Media Queries aplicables mediante el atributo media en el fuente (source) de nuestros vídeos para cargar vídeos según las especificaciones de cada dispositivo:

<video controls>
     <source src="video-1024.mp4" media="(min-device-width: 1200px)">
     <source src="video-640.mp4">
</video>

Como podemos ver, se aplica la misma sintaxis que en el CSS; de tal forma podemos especificar que los dispositivos con mayor resolución carguemos los vídeos de mayor resolución (más grandes) y en cambio los dispositivos de menor resolución especifiquemos los vídeos de menor resolución (más pequeños).

Repasemos un poco los operadores disponibles que tenemos para emplear en este atributo:

Operadores de los Media Queries

Recordando que podemos especificar distintos vídeos según el dispositivo que esté empleando el usuario; entre los principales tenemos:

Dispositivos de los Media Queries

Además podemos aplicar algunos valores; entre los más empleados tenemos:

Valores de los Media Queries

Puedes ver la documentación completa en el siguiente enlace: HTML media Attribute.

Videos responsive en pantallas

Ahora le traemos una solución para que al momento de insertar vídeos en nuestro blog o web se vean correctamente; cuando queremos insertar un video por ejemplo de YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/KfcI5pNJEbM?autoplay=1" frameborder="0" allow="autoplay"></iframe>

Tenemos un tag como el mostrado anteriormente; un iframe en pocas palabras con unas medidas fijas, lo cual nos trae varios problemas, ya que con estas medidas nuestro video no se adapta al tamaño de nuestra web y nuestra web va por un lado y el video va por otro y por lo tanto, nuestro video se distorsiona en algunas pantallas.

Responsive Design en nuestra web: adapta imágenes y vídeos

En esta sección, como hablamos sobre la estructura de un sitio Responsivo, que consiste en que nuestras imágenes y vídeos se vean correctamente en cualquier pantalla; para eso en muchos casos necesitamos aplicar los media_queries y también emplear los porcentajes sobre estos recursos claves en nuestra web.

Adaptar las imágenes a las pantallas

Ahora vamos a ver cómo adaptar las imágenes en nuestra página web; tenemos varias factores que podemos tomar en cuenta para tal fin como veremos en la siguiente clasificación.

El ancho de la imagen igual al de la web: Esta es la configuración más sencilla que podemos establecer; estamos indicando que el tamaño máximo de nuestra imagen corresponderá al a de su elemento padre que sería la web; para eso debemos indicar la siguiente regla en CSS: 

img { 
  width:100%; 
}

Con esta configuración podemos extender nuestra imagen de manera progresiva según lo que ocupe el contenedor hasta un límite; esto es un pequeño truco, que establecemos el tamaño máximo que tendrá nuestra imagen, de esta forma podemos evitar comportamientos indeseables como cuando se supera el tamaño máximo de nuestra imagen, por ejemplo 500px como vemos a continuación:

img {
  width:100%;
  max-width:500px;
}

 Como podemos ver con unas sencillas reglas podemos adaptar nuestras imágenes para que sean responsive con el resto del cuerpo HTML de nuestra página web; podemos aplicar estas imágenes como fondo o background, en donde prácticamente no tendríamos ningún otro contenedor padre atrás de las mismas, o podemos aplicarlas en alguna sección clave de nuestro contenido, como lo es el container en Bootstrap para ajustar las imágenes a nuestro contenedor y de esta forma hacerlas autoajustables.

También recuerda que si lo que quieres es ajustar una imagen tanto en lo alto como lo ancho de un contenedor y que esta no se distorsione, recuerda que está la propiedad object-fit como mostramos en una entrada anterior; una forma interesante de que cuando expandas tu imagen puedes cubrir todo el contenedor padre, es decir, el contenedor que lo contiene. 

Preguntas frecuentes (FAQ)

• ¿Qué formato de video es más compatible?
  • MP4 con H.264 es el estándar actual.
• ¿Qué atributo evita que el navegador descargue todo el audio antes de tiempo?
  • preload="none".
• ¿Puedo poner subtítulos en HTML sin plataformas externas?
  • Sí, usando <track> con archivos .vtt.
• ¿Cómo hago que el video muestre una imagen previa?
  • Con el atributo poster.

Conclusión

Las etiquetas <video> y <audio> son dos de los elementos más potentes de HTML5. Permiten crear experiencias multimedia completas, rápidas y accesibles sin dependencias externas. Y si además los integras en entornos como una app de cursos o un sistema de podcasts verás que con unas pocas configuraciones puedes mejorar muchísimo la experiencia de tus usuarios.

Ahora aprende a usar la abreviatura de etiqueta con las etiquetas <base> y <abbr>