Curso HTML – Módulo 9: Medios en HTML

Publicada el por

Curso HTML – Módulo 9: Medios en HTML

La web moderna no vive solo de texto e imágenes. El contenido multimedia forma parte de casi cualquier experiencia digital: cursos online, podcasts, demos de producto, videoblogs, música, tutoriales, entrevistas o fondos sonoros.

HTML5 cambió por completo la forma de integrar estos recursos. Antes, reproducir vídeo o audio en una web dependía muchas veces de tecnologías externas como Flash. Hoy, disponemos de etiquetas nativas, semánticas y mucho más potentes para insertar contenido multimedia de manera directa, accesible y compatible con navegadores modernos.

En este módulo aprenderás a trabajar con audio y vídeo en HTML, entenderás sus atributos más importantes, conocerás los formatos compatibles, aprenderás a ofrecer alternativas para distintos navegadores y descubrirás buenas prácticas de rendimiento, accesibilidad y usabilidad.

Objetivos del módulo

Al finalizar este módulo deberías ser capaz de:

  • Comprender cómo incorporar contenido multimedia en una página web.
  • Utilizar correctamente las etiquetas <video> y <audio>.
  • Configurar atributos como controls, autoplay, muted, loop, preload y poster.
  • Añadir múltiples fuentes mediante <source> para mejorar la compatibilidad.
  • Entender qué formatos de vídeo y audio son más habituales en la web.
  • Mejorar la accesibilidad mediante subtítulos, descripciones y contenido alternativo.
  • Aplicar buenas prácticas para no perjudicar el rendimiento de la página.
  • Crear ejemplos funcionales con controles integrados y experiencia de usuario correcta.

1. La revolución multimedia de HTML5

Antes de HTML5, incluir un vídeo en una web solía ser una tarea incómoda y poco fiable. Dependías de plugins externos, de objetos embebidos y de soluciones que muchas veces no funcionaban en móviles o que presentaban problemas de seguridad.

Con la llegada de HTML5 aparecieron etiquetas nativas que resolvieron este problema:

  • <audio> para sonido.
  • <video> para vídeo.
  • <source> para definir distintas fuentes.
  • <track> para subtítulos, capítulos o descripciones temporizadas.

Esto convirtió al navegador en un reproductor multimedia capaz de manejar contenido sin tecnologías externas.

La gran ventaja es que ahora podemos construir páginas más limpias, semánticas y mantenibles. Pero eso no significa que todo sea “poner un archivo y listo”. Trabajar bien con medios implica pensar en:

  • compatibilidad,
  • rendimiento,
  • accesibilidad,
  • experiencia móvil,
  • consumo de datos,
  • y control del usuario.

2. El elemento <audio>

La etiqueta <audio> se utiliza para insertar sonido en una página web: música, efectos, narraciones, podcasts, avisos o cualquier otro recurso sonoro.

Estructura básica

<audio controls>
   <source src="audio.mp3" type="audio/mpeg">
   Tu navegador no soporta el elemento de audio.
</audio>

Qué ocurre aquí

  • <audio> define el reproductor.
  • controls muestra los controles integrados del navegador.
  • <source> indica el archivo y su tipo MIME.
  • El texto de fallback aparece si el navegador no puede reproducirlo.

Atributos más importantes de <audio>

controls: Muestra los controles integrados del navegador: reproducir, pausar, barra de progreso, volumen, etc.

<audio controls>
   <source src="podcast.mp3" type="audio/mpeg">
</audio>

Sin este atributo, el audio puede existir en el DOM pero el usuario no tendrá forma de controlarlo, salvo que lo hagas con JavaScript.

autoplay: Hace que el audio intente reproducirse automáticamente al cargar la página.

<audio autoplay>
   <source src="intro.mp3" type="audio/mpeg">
</audio>

Importante: en la práctica, muchos navegadores bloquean el autoplay con sonido por razones de usabilidad. Por eso, si necesitas reproducción automática, normalmente tendrás que combinarlo con muted, aunque esto tiene más sentido en vídeo que en audio.

loop: Hace que el archivo vuelva a empezar automáticamente cuando termina. Útil para música ambiental, sonidos repetitivos o efectos continuos.

<audio controls loop>
   <source src="ambiente.mp3" type="audio/mpeg">
</audio>

muted: Inicia el audio silenciado. En audio no suele ser tan común como en vídeo, pero existe y puede ser útil en ciertos contextos de pruebas o interfaces complejas.

<audio controls muted>
   <source src="demo.mp3" type="audio/mpeg">
</audio>

preload: Indica al navegador cómo debe cargar el archivo antes de que el usuario interactúe.
Valores habituales:

  • none: no precargar.
  • metadata: cargar solo metadatos.
  • auto: el navegador decide cargar más contenido.
<audio controls preload="metadata">
   <source src="entrevista.mp3" type="audio/mpeg">
</audio>

Esto influye en el rendimiento, especialmente si el archivo es pesado.

3. El elemento <video>

La etiqueta <video> permite insertar clips, tutoriales, animaciones, grabaciones o cualquier contenido audiovisual.

Estructura básica

<video width="320" height="240" controls>
   <source src="video.mp4" type="video/mp4">Tu navegador no soporta el elemento de video.
</video>

Es el equivalente visual del elemento <audio>, pero con atributos adicionales relacionados con dimensiones, miniatura previa y reproducción en línea.

Atributos más importantes de <video>

controls: Muestra controles de reproducción. Normalmente es el atributo mínimo imprescindible si no vas a crear controles personalizados.

<video controls> <source src="curso.mp4" type="video/mp4"> </video>

width y height: Permiten definir el tamaño visual del reproductor. En proyectos reales suele ser mejor controlar el tamaño con CSS para lograr un diseño responsive.

<video width="640" height="360" controls> <source src="demo.mp4" type="video/mp4"> </video>

autoplay: Intenta reproducir el vídeo automáticamente al cargar la página. En la mayoría de navegadores modernos, el autoplay solo funciona de forma fiable si el vídeo está silenciado con muted.

<video autoplay muted> <source src="promo.mp4" type="video/mp4"> </video>

muted: Silencia el vídeo al iniciar. Muy usado en banners, hero sections y vídeos decorativos.

<video controls muted> <source src="presentacion.mp4" type="video/mp4"> </video>

loop: Reiniciar el vídeo al terminar. Ideal para fondos de vídeo o clips cortos que deben repetirse.

<video controls loop> <source src="animacion.mp4" type="video/mp4"> </video>

poster: Muestra una imagen antes de iniciar la reproducción. Es una miniatura o “portada” del vídeo. Muy recomendable porque mejora la presentación y evita mostrar un fotograma negro o vacío antes de reproducir.

<video controls poster="miniatura.jpg"> <source src="tutorial.mp4" type="video/mp4"> </video>

preload: Funciona igual que en <audio>. En vídeo es especialmente importante porque los archivos suelen ser mucho más pesados.

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

playsinline: Permite que en algunos dispositivos móviles el vídeo se reproduzca dentro de la propia página, en lugar de abrirse a pantalla completa. Muy útil en diseños mobile-first.

<video controls playsinline muted> <source src="movil.mp4" type="video/mp4"> </video>

4. La etiqueta <source>: compatibilidad y robustez

Aunque podrías indicar un archivo directamente en src, lo recomendable es usar una o varias etiquetas <source> dentro del elemento multimedia.

Ejemplo con múltiples fuentes

<video controls width="640">
   <source src="video.mp4" type="video/mp4">
   <source src="video.webm" type="video/webm"> Tu navegador no soporta el elemento de video.
</video>

El navegador intentará reproducir la primera fuente compatible. Si no puede, probará la siguiente.

Esto mejora la compatibilidad entre navegadores y dispositivos.

Ventajas de usar <source>

  • Permite definir varios formatos del mismo recurso.
  • Ofrece más flexibilidad que usar un único src.
  • Facilita el mantenimiento.
  • Es la forma más profesional de preparar contenido multimedia web.

5. Formatos de vídeo compatibles en la web

No todos los navegadores soportan exactamente los mismos formatos. Por eso conviene conocer los más comunes.

MP4

Es el formato más extendido en la web. Suele ofrecer muy buena compatibilidad y un equilibrio razonable entre calidad y compresión.

<source src="video.mp4" type="video/mp4">

Es normalmente la primera opción en proyectos reales.

WebM: Formato abierto, muy eficiente y bien soportado en navegadores modernos. A menudo se usa como alternativa o complemento a MP4.

<source src="video.webm" type="video/webm">

Ogg / OGV: Formato abierto menos común hoy en día, pero todavía relevante en ciertos contextos. No suele ser la primera opción, pero puede añadirse para ampliar compatibilidad.

<source src="video.ogv" type="video/ogg">

Recomendación práctica para vídeo

En la mayoría de casos:

  • usa MP4 como formato principal,
  • añade WebM como alternativa,
  • y considera Ogg solo si lo necesitas.

6. Formatos de audio compatibles en la web

MP3: Es el estándar más común y universal para audio web. Ideal para podcasts, música y clips generales.

<source src="audio.mp3" type="audio/mpeg">

Ogg: Formato abierto bastante compatible en navegadores modernos. Suele usarse como complemento a MP3.

<source src="audio.ogg" type="audio/ogg">

WAV: Ofrece gran calidad, pero sus archivos suelen ser pesados. No es lo más eficiente para web pública si el rendimiento importa.

<source src="audio.wav" type="audio/wav">

Recomendación práctica para audio

En casi todos los casos:

  • usa MP3 como principal,
  • añade Ogg como respaldo si quieres máxima compatibilidad,
  • evita archivos innecesariamente pesados.

7. Texto alternativo y fallback

Aunque el navegador moderno suele soportar audio y vídeo, siempre es buena idea incluir un mensaje alternativo.

<audio controls> <source src="tema.mp3" type="audio/mpeg"> Tu navegador no soporta el elemento de audio. </audio>

Y en casos más completos, incluso puedes ofrecer un enlace de descarga:

<video controls> <source src="demo.mp4" type="video/mp4"> Tu navegador no soporta el vídeo. <a href="demo.mp4">Descargar video</a> </video>

Esto mejora la accesibilidad y la resiliencia del contenido.

8. Subtítulos y pistas con <track>

Uno de los elementos más importantes y más olvidados en multimedia HTML es <track>.

Sirve para añadir:

  • subtítulos,
  • captions,
  • descripciones,
  • capítulos,
  • metadatos temporizados.

Ejemplo con subtítulos

<video controls width="640"> <source src="clase.mp4" type="video/mp4"> <track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español"> Tu navegador no soporta el elemento de video. </video>

Atributos importantes de <track>

src: Ruta del archivo de pista, normalmente en formato .vtt.

kind: Indica el tipo de pista. Valores frecuentes:

  • subtitles
  • captions
  • descriptions
  • chapters
  • metadata

srclang: Código del idioma, por ejemplo:

  • es
  • en
  • fr

label: Nombre visible para el usuario en el selector de pistas.

default: Marca esa pista como predeterminada.

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

¿Qué es un archivo .vtt?

Es un archivo de texto que contiene marcas temporales y el contenido de subtítulos.

Ejemplo básico:

WEBVTT 00:00:00.000 --> 00:00:03.000 Bienvenidos al curso de HTML. 00:00:03.500 --> 00:00:06.000 En este vídeo aprenderemos a usar la etiqueta video.

Los archivos WebVTT son el estándar habitual para subtítulos en HTML5.

9. Diferencia entre subtítulos, captions y descripciones

Mucha gente los mezcla, pero no son exactamente lo mismo.

subtitles: Traducen o transcriben el diálogo hablado. Pensados para usuarios que no entienden el idioma original.

captions: Además del diálogo, incluyen información sonora importante como:

  • música,
  • efectos,
  • ruidos relevantes,
  • tono contextual.

Ejemplo:

[música suave]
[se oye una puerta cerrarse]

descriptions: Describen visualmente lo que aparece en pantalla para personas con discapacidad visual. Entender esta diferencia es clave cuando trabajas en proyectos accesibles.

10. Accesibilidad (A11y) en medios HTML

Un vídeo no es accesible solo porque “se vea”. Un audio no es accesible solo porque “suene”. Debes pensar en usuarios con diferentes necesidades.

Buenas prácticas esenciales

Ofrece controles visibles

No obligues al usuario a depender de autoplay o interacciones ocultas.

Añade subtítulos

Especialmente en:

  • contenido educativo,
  • entrevistas,
  • vídeos explicativos,
  • tutoriales,
  • redes internas de empresa,
  • formación corporativa.

Proporciona transcripciones

En audio puro, como podcasts o entrevistas, es muy recomendable añadir una transcripción en texto debajo del reproductor.

Evita autoplay con sonido

Puede molestar, desorientar o dificultar la navegación.

Asegura contraste y foco

Si creas controles personalizados con CSS/JS, deben ser navegables con teclado y visibles al enfocarse.

No uses el vídeo como único canal de información

Si en un vídeo explicas algo importante, considera reforzarlo con texto.

11. Rendimiento y optimización

Los medios son recursos pesados. Si se usan mal, pueden ralentizar una web y empeorar la experiencia del usuario.

Recomendaciones de rendimiento

Comprime los archivos

No subas un vídeo de 200 MB si puedes ofrecerlo comprimido adecuadamente.

Usa preload=»metadata» cuando no necesites precarga total

Así el navegador solo carga datos básicos al principio.

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

No abuses del autoplay

Especialmente en móvil o en conexiones lentas.

Usa resoluciones razonables

No siempre necesitas 4K. Para muchos contextos, 720p o 1080p es más que suficiente.

Usa una imagen poster

Mejora la apariencia inicial y evita carga visual deficiente.

Considera lazy loading mediante JavaScript o estrategias de diseño

HTML puro no resuelve todo; en proyectos grandes conviene pensar cuándo cargar realmente el medio.

12. Responsive design en vídeo y audio

El audio suele adaptarse bien por sí solo, pero el vídeo necesita cierta atención para verse correctamente en distintos tamaños de pantalla.

Error común

Fijar ancho y alto rígidos:

<video width="640" height="360" controls>

Funciona, pero no siempre se adapta bien a móviles.

Mejor enfoque con CSS

<video class="video-responsive" controls> <source src="video.mp4" type="video/mp4"> </video> .video-responsive { width: 100%; max-width: 800px; height: auto; display: block; }

Así el vídeo puede encajar en distintos contenedores sin deformarse.

13. Controles nativos vs controles personalizados

Por defecto, controls muestra la interfaz del navegador. Esto tiene varias ventajas:

  • rápida de implementar,
  • accesible en muchos casos,
  • consistente,
  • sin necesidad de JavaScript extra.

Cuándo usar controles nativos

  • sitios sencillos,
  • blogs,
  • documentación,
  • proyectos educativos,
  • MVPs.

Cuándo podrías usar controles personalizados

  • branding muy específico,
  • reproductores avanzados,
  • integración con analítica o funcionalidades especiales,
  • experiencias inmersivas.

Pero cuidado: crear controles personalizados implica más trabajo de:

  • accesibilidad,
  • manejo por teclado,
  • sincronización,
  • estados de reproducción,
  • volumen,
  • fullscreen,
  • subtítulos,
  • compatibilidad.

En la mayoría de casos, los controles nativos son la mejor elección.

14. Vídeos decorativos y de fondo

A veces el vídeo no forma parte del contenido principal, sino del diseño visual. Por ejemplo, un vídeo de fondo en una cabecera.

Ejemplo

<video autoplay muted loop playsinline> <source src="fondo.mp4" type="video/mp4"> </video>

Claves aquí

  • autoplay para que empiece solo.
  • muted porque, sin esto, normalmente el autoplay fallará.
  • loop para repetirlo.
  • playsinline para evitar que en móvil se abra aparte.

Buena práctica: si el vídeo es decorativo, no debería distraer ni dificultar la lectura del contenido principal.

15. Ejemplo práctico: insertar un audio con controles

<audio controls preload="metadata">
   <source src="entrevista.mp3" type="audio/mpeg">
   <source src="entrevista.ogg" type="audio/ogg"> Tu navegador no soporta el elemento de audio.
</audio>

Qué estamos haciendo bien aquí

  • mostramos controles;
  • cargamos solo metadatos al inicio;
  • ofrecemos dos formatos;
  • añadimos mensaje alternativo.

Es un ejemplo correcto, simple y profesional.

16. Ejemplo práctico: insertar un vídeo con controles

<video width="640" height="360" controls poster="portada.jpg" preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm"> Tu navegador no soporta el elemento de video.
</video>

Este ejemplo incorpora

  • dimensiones del vídeo,
  • controles visibles,
  • imagen de portada,
  • precarga moderada,
  • varias fuentes compatibles,
  • texto de fallback.

17. Ejemplo práctico completo con subtítulos

<video controls poster="miniatura.jpg" class="video-responsive">
   <source src="tutorial.mp4" type="video/mp4">
   <source src="tutorial.webm" type="video/webm">
   <track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español" default> Tu navegador no    soporta el elemento de video.
</video>
<style>
   .video-responsive {
       width: 100%;
       max-width: 800px;
       height: auto;
   }
</style>

Este ya es un ejemplo cercano a producción para una web moderna.

18. Errores frecuentes al trabajar con medios en HTML

1. Usar autoplay con sonido

Es una de las prácticas más molestas para el usuario y además muchos navegadores la bloquean.

2. No ofrecer formatos alternativos

No siempre tendrás problemas, pero depender de un único formato puede romper compatibilidad.

3. Insertar archivos demasiado pesados

Un vídeo enorme puede hacer que la página cargue mal, especialmente en móvil.

4. Olvidar subtítulos

Esto perjudica la accesibilidad y también reduce la utilidad del contenido en entornos sin sonido.

5. No añadir poster en vídeo

El reproductor puede verse vacío o poco profesional.

6. Fijar tamaños que rompen el diseño responsive

Lo que se ve bien en escritorio puede desbordarse en móvil.

7. No incluir fallback

Siempre es bueno dar una alternativa mínima o un enlace de descarga.

19. Ejemplo maestro: página con audio y vídeo

Este ejemplo reúne audio, vídeo, subtítulos y una estructura clara.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Medios en HTML</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 900px;
        margin: 40px auto;
        padding: 20px;
        line-height: 1.6;
      }

      h1,
      h2 {
        color: #222;
      }

      audio,
      video {
        width: 100%;
        max-width: 720px;
        display: block;
        margin: 20px 0;
      }

      .bloque {
        margin-bottom: 40px;
      }
    </style>
  </head>
  <body>
    <h1>Módulo 9: Medios en HTML</h1>
    <section class="bloque">
      <h2>Ejemplo de audio</h2>
      <p>Escucha este clip de audio con controles integrados:</p>
      <audio controls preload="metadata">
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg"> Tu navegador no soporta el elemento de audio.
      </audio>
    </section>
    <section class="bloque">
      <h2>Ejemplo de video</h2>
      <p>Reproduce este vídeo con subtítulos en español:</p>
      <video controls poster="poster.jpg" preload="metadata">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        <track src="subtitulos-es.vtt" kind="subtitles" srclang="es" label="Español" default> Tu navegador no soporta el elemento de video.
      </video>
    </section>
  </body>
</html>

20. Ejercicios prácticos

Ejercicio 1: reproductor de audio básico

Crea una página que incluya un archivo de audio con controles visibles. Añade al menos dos formatos distintos (.mp3 y .ogg).

Ejercicio 2: reproductor de vídeo con miniatura

Inserta un vídeo usando la etiqueta <video>, añade controles y una imagen de portada con poster.

Ejercicio 3: audio en bucle

Crea un reproductor de audio que use loop para repetirse automáticamente al terminar.

Ejercicio 4: vídeo responsive

Haz que un vídeo ocupe el 100% del ancho de su contenedor sin deformarse. Usa CSS con width: 100% y height: auto.

Ejercicio 5: subtítulos en HTML5

Investiga cómo crear un archivo .vtt y añádelo a un vídeo con la etiqueta <track>.

Ejercicio 6: comparativa de formatos

Prueba a cargar el mismo contenido multimedia en varios formatos y analiza cuáles acepta mejor tu navegador.

21. Ejercicios avanzados

El laboratorio de compatibilidad

Crea un mismo reproductor de vídeo con tres fuentes: MP4, WebM y Ogg. Comprueba en distintos navegadores cuál se utiliza.

Podcast accesible

Inserta un audio de entrevista o podcast y acompáñalo con una transcripción escrita debajo. El objetivo es mejorar la accesibilidad y la indexación.

Vídeo educativo completo

Construye una ficha de vídeo que incluya:

  • título,
  • descripción,
  • miniatura,
  • subtítulos,
  • y enlace de descarga.

Fondo multimedia controlado

Haz una cabecera con un vídeo decorativo que tenga autoplay, muted, loop y playsinline, pero asegúrate de que el texto siga siendo legible encima.

22. Buenas prácticas profesionales

Deja el control al usuario

Siempre que no sea un recurso puramente decorativo, el usuario debe poder reproducir, pausar y controlar el medio.

Usa formatos razonables

MP4 y MP3 suelen ser la base. Añade WebM u Ogg si el proyecto lo necesita.

Prioriza accesibilidad

Subtítulos, transcripciones y fallback no son extras: son parte de un contenido bien hecho.

Piensa en móvil

Comprueba cómo se ve y se comporta el vídeo en pantallas pequeñas.

Optimiza el peso

Cada mega cuenta. El medio debe verse bien, pero también cargar rápido.

No abuses del medio

Que algo pueda reproducirse en una web no significa que deba hacerlo. Usa audio y vídeo con intención.

23. Conclusión

Las etiquetas <audio> y <video> son dos de las herramientas más potentes de HTML5. Bien utilizadas, permiten crear experiencias mucho más ricas, didácticas y modernas sin depender de plugins externos.

Pero dominar medios en HTML no consiste solo en saber insertar un archivo. El verdadero salto de nivel está en entender:

  • qué atributos usar y cuándo,
  • cómo mejorar la compatibilidad con <source>,
  • cómo hacer el contenido accesible con <track>,
  • cómo evitar errores de rendimiento,
  • y cómo diseñar una experiencia cómoda para el usuario.

En desarrollo web, el multimedia bien implementado transmite profesionalidad. El mal implementado genera lentitud, frustración y barreras.

Aprende a usarlo con criterio y tendrás una base sólida para proyectos educativos, blogs, landing pages, portfolios, aplicaciones y plataformas de contenido.