<audio> y <video>: medios incrustados

`<audio>` y `<video>`: medios incrustados

HTML puede incrustar audio y video directamente en la página, sin plugins ni JavaScript. Los elementos <audio> y <video> comparten la misma API: atributos de comportamiento, un atributo para la fuente, y la posibilidad de listar múltiples formatos con <source>.

A diferencia de <img>, estos elementos tienen etiqueta de apertura y cierre y pueden contener hijos.

`<audio>`: incrustar sonido

<!-- Audio básico: src + controls -->
<audio src="audio/cancion.mp3" controls></audio>

En el sandbox el audio no reproduce (no hay servidor de archivos), pero los controles muestran cómo se verá con el archivo real.

Atributos clave:

src — ruta o URL del archivo de audio.
controls — atributo booleano. Sin él, no hay interfaz de usuario: el audio existe en el DOM pero el usuario no puede reproducirlo ni detenerlo. En lecciones básicas siempre se incluye.
loop — repite el audio indefinidamente al terminar.
muted — el audio se reproduce sin sonido.
autoplay — intenta reproducir automáticamente al cargar la página. Casi siempre bloqueado (ver nota abajo).

Por qué autoplay con sonido está bloqueado:

Los navegadores modernos bloquean el autoplay de audio con sonido por defecto, a menos que el usuario haya interactuado previamente con la página. El propósito es no sorprender al usuario con sonido no solicitado. La única excepción aceptada es autoplay muted (video o audio silenciado, sin JS).

`<video>`: incrustar video

<!-- Video básico: src + controls + poster -->
<video src="video/intro.mp4" controls poster="video/portada.jpg"></video>

En el sandbox el video no reproduce (no hay servidor de archivos), pero los controles y el área de video muestran cómo se verá con el archivo real.

Atributos clave:

src — ruta o URL del archivo de video.
controls — igual que en <audio>: sin él no hay UI.
poster — imagen que se muestra antes de reproducir el video (la portada o thumbnail). Si falta, el navegador muestra el primer frame o nada hasta que empiece a cargar.
width / height — reservan espacio, igual que en <img>.
loop, muted, autoplay — mismo comportamiento que en <audio>.

`<source>`: múltiples formatos del mismo medio

Distintos navegadores soportan distintos formatos de video y audio. Para garantizar compatibilidad, se listan las fuentes en orden de preferencia con <source> y el navegador elige el primero que puede reproducir:

<video controls poster="video/portada.jpg">
  <source src="video/intro.webm" type="video/webm">
  <source src="video/intro.mp4" type="video/mp4">
</video>

<source> es un void element. Sus atributos:

src — la ruta del archivo.
type — el MIME type del formato (video/webm, video/mp4, audio/mpeg). Permite al navegador descartar fuentes de formatos no soportados sin intentar cargarlas.

src directo y <source> hijos son mutuamente excluyentes. Los dos patrones son distintos; no se mezclan:

<!-- Patrón A: un solo formato → src en el elemento padre -->
<video src="intro.mp4" controls></video>

<!-- Patrón B: múltiples formatos → <source> hijos, sin src en el padre -->
<video controls>
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
</video>

<!-- ❌ MAL: src en el padre Y <source> hijos -->
<video src="intro.mp4" controls>
  <source src="intro.webm" type="video/webm">
</video>

El mismo patrón funciona para <audio>:

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

Tu turno: el starter tiene los dos bloques de comentarios como guía. Creá el <audio> con src y controls, y el <video> con controls, poster, y exactamente dos <source> hijos — sin src en el <video>. Luego hacé clic en “Comprobar”.