Multimedia

La web no es solo texto. Vídeos, audios, imágenes responsive que se adaptan a cada pantalla... HTML tiene etiquetas nativas para todo esto. Ya no necesitas plugins como Flash (que murió en 2020). El navegador hace el trabajo pesado.

Vídeo con <video>

La etiqueta <video> incrusta vídeo directamente en la página:

<video
    width="800"
    height="450"
    controls
    preload="metadata"
    poster="thumbnail-demo.jpg"
>
    <source src="demo-producto.webm" type="video/webm">
    <source src="demo-producto.mp4" type="video/mp4">
    Tu navegador no soporta la etiqueta video.
</video>

Atributos de <video>

Los navegadores bloquean el autoplay con sonido para evitar vídeos invasivos. Si necesitas autoplay, pon también muted. Es una regla de todos los navegadores modernos.

Múltiples fuentes con <source>

Cada navegador soporta formatos diferentes. Usando <source>, ofreces varias opciones y el navegador elige la primera que puede reproducir:

• WebM: mejor compresión, soportado en Chrome, Firefox, Edge.
• MP4 (H.264): soporte universal, incluyendo Safari.

Pon WebM primero (mejor calidad/tamaño) y MP4 como fallback.

Vídeo como fondo decorativo

<!-- Vídeo de fondo en un hero section (sin controles, silenciado, en bucle) -->
<video autoplay muted loop playsinline preload="metadata"
       class="hero-video" aria-hidden="true">
    <source src="background-city.webm" type="video/webm">
    <source src="background-city.mp4" type="video/mp4">
</video>

Fíjate en aria-hidden="true": como es puramente decorativo, lo ocultamos de los lectores de pantalla.

Audio con <audio>

Funciona muy parecido a <video>:

<h2>Episodio 42: El futuro de WebAssembly</h2>
<audio controls preload="metadata">
    <source src="podcast-ep42.opus" type="audio/opus">
    <source src="podcast-ep42.mp3" type="audio/mpeg">
    Tu navegador no soporta la etiqueta audio.
</audio>

• Opus: formato moderno, excelente calidad a bajo peso. Soportado en todos los navegadores modernos.
• MP3: soporte universal, como fallback.

Imágenes responsive con <picture>

En la lección 4 viste <img>. Pero ¿qué pasa si quieres servir una imagen diferente según el tamaño de pantalla? Ahí entra <picture>:

<picture>
    <!-- Pantallas grandes: imagen panorámica -->
    <source
        media="(min-width: 1024px)"
        srcset="hero-desktop.avif"
        type="image/avif"
    >
    <source
        media="(min-width: 1024px)"
        srcset="hero-desktop.webp"
        type="image/webp"
    >

    <!-- Pantallas medianas: imagen cuadrada -->
    <source
        media="(min-width: 640px)"
        srcset="hero-tablet.avif"
        type="image/avif"
    >
    <source
        media="(min-width: 640px)"
        srcset="hero-tablet.webp"
        type="image/webp"
    >

    <!-- Fallback para todo lo demás -->
    <img
        src="hero-mobile.jpg"
        alt="Panorámica del estudio de grabación con luces LED y equipo de producción"
        width="800"
        height="600"
        loading="eager"
        fetchpriority="high"
        decoding="async"
    >
</picture>

<picture> te permite:

• Servir diferentes imágenes según el tamaño de pantalla (art direction).
• Ofrecer formatos modernos (AVIF, WebP) con fallback a JPEG.
• El <img> dentro de <picture> siempre es obligatorio: es el fallback final.

srcset y sizes: misma imagen, distintas resoluciones

Si la imagen es la misma pero necesitas distintos tamaños para distintas pantallas, usa srcset directamente en <img>:

<img
    srcset="
        producto-400w.jpg 400w,
        producto-800w.jpg 800w,
        producto-1200w.jpg 1200w
    "
    sizes="
        (max-width: 640px) 100vw,
        (max-width: 1024px) 50vw,
        33vw
    "
    src="producto-800w.jpg"
    alt="Auriculares inalámbricos Sony WH-1000XM6 en color negro"
    width="800"
    height="800"
    loading="lazy"
    decoding="async"
>

• srcset: lista de imágenes disponibles con su ancho real en píxeles (w).
• sizes: le dice al navegador cuánto espacio ocupa la imagen en cada breakpoint.
• El navegador elige automáticamente la imagen más adecuada considerando el tamaño de pantalla y la densidad de píxeles (retina).

Formatos de imagen modernos

En 2026, la combinación ganadora es: AVIF como primera opción, WebP como fallback, JPEG como último recurso. Para iconos y logos, siempre SVG.

Carga diferida: rendimiento real

Las imágenes y los iframes tienen el atributo loading que controla cuándo se descargan:

<!-- Carga diferida: solo cuando el usuario hace scroll cerca -->
<img src="foto-equipo.jpg" alt="Equipo de desarrollo" loading="lazy">

<!-- Carga prioritaria: la imagen hero o above-the-fold -->
<img src="hero.jpg" alt="Hero de la página" loading="eager" fetchpriority="high">

<!-- Iframe con carga diferida (embed de YouTube, mapas) -->
<iframe
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Vídeo tutorial de HTML semántico"
    width="560"
    height="315"
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
></iframe>

• loading="lazy": el recurso se carga solo cuando está cerca del viewport. Úsalo en todo lo que esté "below the fold" (debajo de lo visible sin scroll).
• loading="eager": carga inmediata. Para la imagen hero y contenido visible al cargar la página.
• fetchpriority="high": le dice al navegador que este recurso es prioritario. Solo para la imagen más importante de la página.