Multimedia: video, audio, picture y srcset

Hubo una época en que reproducir un video en la web requería instalar Flash. HTML5 lo cambió todo: video y audio son etiquetas nativas. Hoy las aprendes, y de paso el truco que usan los sitios rápidos para servir a cada pantalla la imagen exacta que necesita.

video y audio

<video
controls
preload="metadata"
poster="img/portada.webp"
width="1280" height="720"
>
<source src="video/demo.webm" type="video/webm">
<source src="video/demo.mp4" type="video/mp4">
Tu navegador no soporta video HTML5.
</video>

<audio controls preload="metadata" src="audio/episodio-1.mp3"></audio>

Los atributos que importan:

• controls: muestra los controles nativos (play, volumen). Sin él no hay forma de reproducir — no lo olvides.
• preload="metadata": descarga solo la duración y dimensiones, no el video entero. Tus visitantes con datos móviles te lo agradecen.
• poster: la imagen de portada antes del play.
• Varios <source>: el navegador usa el primero que soporte (webm pesa menos; mp4 es el respaldo universal).

Imágenes responsivas I: srcset (tamaños)

Servirle una imagen de 2000px a un celular de 400px es tirar datos y velocidad. srcset ofrece la misma imagen en varios tamaños y el navegador elige la mínima suficiente:

<img
src="img/foto-800.webp"
srcset="img/foto-400.webp 400w,
        img/foto-800.webp 800w,
        img/foto-1600.webp 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Panorámica de la ciudad al amanecer"
width="800" height="450"
>

Se lee así: "tengo esta foto en 400, 800 y 1600 píxeles de ancho (srcset); en pantallas de hasta 600px la imagen ocupará todo el ancho, en las demás 800px (sizes) — elige tú, navegador, la más eficiente".

Imágenes responsivas II: picture (formatos y arte)

<picture> va un paso más allá: cambiar de FORMATO (avif → webp → jpg según soporte) o incluso de encuadre entre móvil y desktop:

<picture>
<source srcset="img/hero.avif" type="image/avif">
<source srcset="img/hero.webp" type="image/webp">
<img src="img/hero.jpg" alt="Equipo trabajando en la oficina"
     width="1200" height="600">
</picture>

El navegador recorre los <source> en orden y usa el primero que entienda. El <img> del final es a la vez el respaldo universal y quien lleva el alt y las dimensiones — nunca lo omitas.

Mini-reto

Ve a un sitio de noticias grande, abre DevTools → Network, filtra por Img y recarga. Mira las URLs: verás llegar imágenes con tamaños en el nombre (-400w, -800w). Cambia el ancho de la ventana y recarga: en ventana angosta llegan las pequeñas. Eso es srcset en producción.

Qué sigue

Tu página ya tiene de todo — pero para Google y las redes sociales sigue siendo anónima. Última lección teórica del módulo: metadatos, SEO básico y OpenGraph.