Lección 19. Multimedia en HTML.

HTML permite integrar multimedia directamente en la página, como videos, audios e incluso animaciones. Esto hace posible mostrar información visual y auditiva sin depender de programas externos.

Antes de HTML5, era necesario usar plugins como Flash. Hoy en día, los elementos video y audio funcionan en todos los navegadores modernos.

Video._

La etiqueta video permite reproducir un archivo de video dentro de la página.

Ejemplo:

<video src="video.mp4" controls poster="imagen.jpg"></video>

Nota: Se recomienda siempre incluir el atributo controls para mostrar los botones de reproducción, pausa, volumen y pantalla completa.

El atributo poster permite mostrar una imagen previa antes de que el video inicie. Si no se coloca, el navegador mostrará un cuadro en negro.

También puedes agregar varios formatos de video para mejorar compatibilidad:

<video controls poster="preview.png">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Tu navegador no soporta video en HTML5.
</video>

Audio._

La etiqueta audio funciona igual que el video, pero solo para sonidos y música. También es recomendable usar controls para mostrar el reproductor.

<audio src="audio.mp3" controls></audio>

Puedes agregar varios formatos de audio también:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Tu navegador no soporta audio en HTML5.
</audio>

Atributos importantes._

• controls -> Muestra los controles del reproductor (recomendado siempre).

• autoplay -> Reproduce automáticamente al cargar la página. La mayoría de navegadores solo lo permiten si el elemento está muted.

• loop -> Vuelve a reproducir el archivo al terminar.

• muted -> El video/audio inicia sin sonido.

• poster -> (Solo video) Imagen previa al iniciar la reproducción.

Nota: Si usas autoplay, se recomienda agregar también muted por compatibilidad:

<video src="demo.mp4" autoplay muted loop></video>

Compatibilidad._

No todos los navegadores soportan los mismos formatos. Por eso es común usar varios <source> dentro del video o audio.

Recomendaciones:

• Video MP4 (H.264) -> Mejor compatibilidad.

• Video WebM -> Más liviano y moderno.

• Audio MP3 -> Universal.

• Audio OGG -> Alternativa libre.