15. Audio y Video en HTML5

Curso HTML5 desde cero — Freimel Jerez

HTML5 permite reproducir audio y video de forma nativa, sin plugins externos. En esta lección aprenderás a usar correctamente las etiquetas <audio> y <video>.

🎧 Etiqueta <audio>

Se utiliza para reproducir sonidos, música o podcasts directamente en el navegador.

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

Atributos importantes

• controls: muestra los controles
• autoplay: reproduce automáticamente
• loop: repite el audio
• muted: inicia en silencio

🎬 Etiqueta <video>

Permite reproducir videos directamente desde el servidor.

<video controls width="100%">
  <source src="video.mp4" type="video/mp4">
  Tu navegador no soporta video.
</video>

Atributos del video

• controls: botones de reproducción
• poster: imagen de portada
• autoplay: reproducción automática
• loop: repetir video
• muted: requerido para autoplay

⚠️ Buenas prácticas

• No usar autoplay con sonido
• Optimizar archivos multimedia
• Usar formatos compatibles (MP3, MP4)
• Preferir YouTube o streaming para videos largos

🎥 Video de la lección

Debes ver el video completo para desbloquear la siguiente lección.

✅ Resumen

• HTML5 soporta audio y video nativamente
• Los atributos controlan el comportamiento
• La optimización mejora la experiencia del usuario

En la siguiente lección aprenderás a usar la etiqueta <source>.