Audio, video e imágenes adaptables

1.Multimedia en la web

Hasta ahora tu página tenía texto, imágenes, tablas y formularios. El audio y el video completan el cuadro: con dos etiquetas, <audio> y <video>, el navegador reproduce archivos sin necesidad de programas externos.

Antes de usar multimedia, ten presentes tres ideas que se repiten en toda la lección:

1. Pesa mucho. Un video sin optimizar puede ser más grande que el resto de tu sitio junto. Usa archivos comprimidos y cortos.
2. Debe ser accesible. Quien no oye necesita subtítulos; quien no ve necesita una descripción o una transcripción.
3. No debe invadir. Nada de sonido que arranque solo: es de las cosas que más molestan y que más rápido hacen cerrar una página.

2.Audio con la etiqueta audio

<audio controls>
  <source src="sonido.mp3" type="audio/mpeg">
  <source src="sonido.ogg" type="audio/ogg">
  Tu navegador no admite audio. <a href="sonido.mp3">Descarga el archivo</a>.
</audio>

<source> permite ofrecer varias versiones del mismo archivo; el navegador usa la primera que entienda. El texto entre las etiquetas solo se muestra si el navegador es tan antiguo que no conoce <audio>.

3.Video con la etiqueta video

<video> funciona igual que <audio>, con algunos atributos más para la imagen:

<video controls width="480" height="270" poster="portada.jpg" preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track kind="captions" src="subtitulos.es.vtt" srclang="es" label="Español" default>
  Tu navegador no admite video. <a href="video.mp4">Descárgalo aquí</a>.
</video>

Observa que el poster se ve antes de pulsar reproducir. El <track> conecta un archivo de subtítulos: lo verás más abajo.

4.Multimedia accesible

Un video sin subtítulos deja fuera a personas sordas o con dificultad auditiva, y también a quien lo ve en el transporte sin audífonos. Hay cuatro prácticas esenciales:

Los subtítulos: archivos .vtt

Los subtítulos se escriben en un archivo de texto con formato WebVTT. Cada bloque tiene un intervalo de tiempo y la frase:

WEBVTT

00:00.000 --> 00:01.500
Un degradado de colores que cambia.

00:01.500 --> 00:03.000
Este video de ejemplo dura tres segundos.

• kind="captions": subtítulos para personas sordas (incluyen sonidos). kind="subtitles" es solo traducción de diálogos.
• srclang="es" indica el idioma y label es el nombre que se verá en el menú.
• default activa esa pista automáticamente.

5.Contenido incrustado con iframe

<iframe> muestra otra página dentro de la tuya: videos de YouTube, mapas de Google, formularios externos. Las plataformas te dan el código listo para pegar (botón «Compartir → Insertar»).

<iframe src="https://www.youtube.com/embed/CODIGO_DEL_VIDEO"
  title="Introducción al HTML: primeros pasos"
  width="560" height="315"
  loading="lazy"
  allowfullscreen></iframe>

• title es obligatorio para accesibilidad: describe el contenido del marco.
• loading="lazy" evita cargarlo hasta que se acerque a la pantalla.
• allowfullscreen permite la pantalla completa.
• sandbox restringe lo que el contenido externo puede hacer. Úsalo cuando el origen no sea de total confianza.

6.Imágenes adaptables

Un celular, una tableta y un monitor grande no necesitan la misma imagen: descargar una foto enorme en un móvil gasta datos y tarda. HTML permite ofrecer varias versiones.

1. srcset y sizes: mismas imagen, distintos tamaños

<img src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Mercado de frutas al amanecer"
  width="800" height="533">

• srcset lista las versiones con su ancho real en píxeles (400w).
• sizes le dice al navegador qué tan ancha se mostrará la imagen: «100% del ancho en pantallas de hasta 600 px; si no, la mitad».
• El navegador elige la mejor opción. src queda como respaldo.

2. picture: imágenes distintas según la pantalla

A veces no basta con reducir la imagen: en vertical conviene un recorte distinto (a esto se le llama «dirección de arte»). Para eso existe <picture>:

El navegador revisa los <source> de arriba abajo y usa el primero cuya condición se cumpla. El <img> final es obligatorio: es la imagen de respaldo y donde va el alt.

3. picture con formatos modernos

<picture>
  <source type="image/webp" srcset="foto.webp">
  <img src="foto.jpg" alt="Mercado de frutas al amanecer" width="800" height="533">
</picture>

7.Peso y rendimiento

1. Mide: abre las herramientas del navegador (F12), pestaña Red, y recarga la página para ver el peso de cada archivo.
2. Reduce: redimensiona y comprime antes de subir.
3. Difiere: usa loading="lazy" en imágenes y preload="none" en audio y video que no se verán de inmediato.

8.Errores frecuentes

• <audio> o <video> sin controls: quedan invisibles y nadie sabe que están ahí.
• autoplay con sonido: la mayoría de los navegadores lo bloquea y a las personas les molesta.
• Subir videos de cientos de MB directamente a tu repositorio.
• Olvidar el texto alternativo del <iframe> (title) o de la imagen dentro de <picture>.
• Poner el alt en el <source> en lugar del <img>: el alt siempre va en el <img> final.
• Rutas incorrectas o mayúsculas distintas en los archivos.
• Usar un archivo en un formato que el navegador no reproduce y no ofrecer alternativa.

9.Glosario