HTML5 introduce etiquetas específicas para incluir y controlar elementos multimedia como audio y video en una página web. Esto facilita la integración de contenido multimedia sin necesidad de plugins adicionales.
<audio>
La etiqueta <audio> se utiliza para incrustar archivos de audio en una página web. Permite a los usuarios reproducir audio directamente desde el navegador.
Atributos Comunes:
src: Especifica la URL del archivo de audio.controls: Muestra los controles de reproducción del audio.autoplay: Hace que el audio se reproduzca automáticamente al cargar la página.loop: Hace que el audio se repita continuamente.muted: Silencia el audio.
Sintaxis Básica:
<audio src="ruta-del-audio.mp3" controls>
Tu navegador no soporta el elemento de audio.
</audio>Ejemplo:
<audio src="audio/ejemplo.mp3" controls autoplay>
Tu navegador no soporta el elemento de audio.
</audio>Notas:
- El contenido dentro de la etiqueta
<audio>se muestra si el navegador no soporta la etiqueta. - Es una buena práctica proporcionar múltiples formatos de archivo (como
.mp3y.ogg) para asegurar la compatibilidad con diferentes navegadores.
<video>
La etiqueta <video> se utiliza para incrustar archivos de video en una página web. Proporciona un control completo sobre la reproducción del video.
Atributos Comunes:
src: Especifica la URL del archivo de video.controls: Muestra los controles de reproducción del video.autoplay: Hace que el video se reproduzca automáticamente al cargar la página.loop: Hace que el video se repita continuamente.muted: Silencia el video.poster: Especifica una imagen que se mostrará antes de que el video se reproduzca.
Sintaxis Básica:
<video src="ruta-del-video.mp4" controls>
Tu navegador no soporta el elemento de video.
</video>Ejemplo:
<video src="videos/ejemplo.mp4" controls width="640" height="360" autoplay loop poster="imagenes/portada.jpg">
Tu navegador no soporta el elemento de video.
</video>Notas:
- Al igual que con el audio, es recomendable ofrecer múltiples formatos de video (
.mp4,.webm,.ogg) para asegurar la compatibilidad con diferentes navegadores. - El atributo
posterpermite mostrar una imagen previa antes de que el video comience a reproducirse.
Uso Combinado de Audio y Video
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio y Video en HTML</title>
</head>
<body>
<h1>Ejemplo de Audio y Video</h1>
<h2>Reproductor de Audio</h2>
<audio src="audio/ejemplo.mp3" controls autoplay>
Tu navegador no soporta el elemento de audio.
</audio>
<h2>Reproductor de Video</h2>
<video src="videos/ejemplo.mp4" controls width="640" height="360" autoplay loop poster="imagenes/portada.jpg">
Tu navegador no soporta el elemento de video.
</video>
</body>
</html>