Seguimos con nuestro curso de HTML5, y hoy vamos a meternos con algo súper emocionante: añadir audio y video a tus páginas web usando las etiquetas <audio> y <video>. Estas etiquetas te permiten incrustar música, podcasts, videos caseros o cualquier contenido multimedia sin depender de plugins externos como Flash.

¿Qué son <audio> y <video>?

Las etiquetas <audio> y <video> son elementos semánticos de HTML5 diseñados para incrustar contenido multimedia directamente en una página web. Son de bloque (ocupan todo el ancho disponible) y pueden incluir controles para reproducir, pausar o ajustar el volumen. Lo mejor es que funcionan nativamente en navegadores modernos, haciendo tu web más interactiva.

• <audio>: Para archivos de sonido, como música, podcasts o efectos.
• <video>: Para videos, como tutoriales, clips o películas.

Ambas soportan varios formatos (MP3, WAV para audio; MP4, WebM para video) y te dan flexibilidad para personalizar la experiencia.

<audio> – Añadiendo Sonido a tu Web

La etiqueta <audio> incrusta un archivo de audio y puede mostrar controles para que los usuarios lo reproduzcan. Es un elemento no vacío, así que tiene apertura y cierre, y puedes incluir contenido alternativo dentro si el navegador no lo soporta.

¿Cómo se usa?

• Apertura: <audio>
• Contenido: Opcionalmente, <source> para los archivos o texto alternativo.
• Cierre: </audio>

Atributos clave

• src: Ruta del archivo de audio (si usas un solo archivo).
• controls: Muestra los controles de reproducción (play, pausa, volumen).
• autoplay: Reproduce automáticamente al cargar (úsalo con cuidado, puede molestar).
• loop: Repite el audio indefinidamente.
• muted: Silencia el audio por defecto.

Ejemplo básico:

<audio src="musica.mp3" controls>
    Tu navegador no soporta audio.
</audio>

• src="musica.mp3": Ruta del archivo (puede ser relativa o URL).
• controls: Muestra botones de reproducción.
• Resultado: Un reproductor de audio simple.

Usando <source> para múltiples formatos

Los navegadores no siempre soportan los mismos formatos (MP3, WAV, OGG). Usa <source> para ofrecer varias opciones:

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

• El navegador prueba el primer <source>; si no lo soporta, pasa al siguiente.
• Formatos comunes: audio/mpeg (MP3), audio/ogg (OGG), audio/wav (WAV).

<video> – Incorporando Videos

La etiqueta <video> incrusta un video con controles opcionales, subtítulos y más. También es un elemento no vacío y puede incluir contenido alternativo.

¿Cómo se usa?

• Apertura: <video>
• Contenido: <source> para archivos, <track> para subtítulos, o texto alternativo.
• Cierre: </video>

Atributos clave

• src: Ruta del video (si usas un solo archivo).
• controls: Muestra controles (play, pausa, volumen, pantalla completa).
• autoplay: Reproduce al cargar (puede ser molesto).
• loop: Repite el video.
• muted: Silencia por defecto (necesario para autoplay en muchos navegadores).
• width y height: Tamaño en píxeles.
• poster: Imagen que se muestra antes de reproducir.

Ejemplo básico:

<video src="video.mp4" controls width="600">
    Tu navegador no soporta video.
</video>

• src="video.mp4": Ruta del video.
• controls: Botones de reproducción.
• width="600": Ancho de 600 píxeles (alto se ajusta proporcionalmente).

Usando <source> para múltiples formatos

Como con <audio>, usa <source> para soportar diferentes formatos (MP4, WebM, OGG):

<video controls width="600">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
    Tu navegador no soporta video.
</video>

• Formatos comunes: video/mp4 (MP4), video/webm (WebM), video/ogg (OGG).

Añadiendo subtítulos con <track>

Puedes incluir subtítulos o descripciones con <track>:

<video controls width="600">
    <source src="tutorial.mp4" type="video/mp4">
    <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
    Tu navegador no soporta video.
</video>

• src="subtitulos.vtt": Archivo de subtítulos en formato WebVTT.
• kind="subtitles": Tipo de pista (puede ser captions, descriptions, etc.).
• srclang="es": Idioma de los subtítulos.
• label="Español": Nombre que aparece en el menú de subtítulos.

Combinándolas: Ejemplo Completo

Vamos a crear una página que combine <audio> y <video> en un contexto real, como una web de presentación: copia el siguiente codigo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Multimedia</title>
</head>
<body>
    <!-- Cabecera -->
    <header>
        <h1>Mi Galería Multimedia</h1>
    </header>

    <!-- Navegación -->
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#media">Multimedia</a></li>
        </ul>
    </nav>

    <!-- Contenido principal -->
    <main>
        <section id="media">
            <h2>Audio y Video</h2>

            <!-- Audio -->
            <article>
                <h3>Mi Podcast Favorito</h3>
                <audio controls>
                    <source src="podcast.mp3" type="audio/mpeg">
                    <source src="podcast.ogg" type="audio/ogg">
                    Tu navegador no soporta audio.
                </audio>
            </article>

            <!-- Video -->
            <article>
                <h3>Video de Viaje</h3>
                <video controls width="600" poster="poster.jpg">
                    <source src="viaje.mp4" type="video/mp4">
                    <source src="viaje.webm" type="video/webm">
                    <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español">
                    Tu navegador no soporta video.
                </video>
            </article>
        </section>
    </main>

    <!-- Pie -->
    <footer>
        <p>© 2025 - Juan</p>
    </footer>
</body>
</html>

¿Qué ves?

• Un <header> con un título.
• Un <nav> con enlaces de navegación.
• Un <main> con dos <article>:
• Un <audio> con un reproductor para un podcast.
• Un <video> con controles, subtítulos y una imagen de portada (poster).
• Un <footer> para cerrar.

Nota:

• Los archivos (podcast.mp3, viaje.mp4, etc.) son ejemplos. Usa rutas relativas (imágenes/video.mp4) o URLs reales.
• Crea un archivo subtitulos.vtt si quieres subtítulos (formato simple, como WEBVTT\n00:00.000 --> 00:02.000\n¡Hola!).

Consejos para Principiantes

• Prueba formatos: Usa MP3/MP4 para compatibilidad amplia, pero añade OGG/WebM como respaldo.
• Usa controls: Sin él, el usuario no puede interactuar (a menos que uses JavaScript).
• Cuidado con autoplay: Puede molestar y algunos navegadores lo bloquean si no hay muted.
• Tamaño del <video>: Ajusta width (o usa CSS); evita height solo para no deformar.
• Texto alternativo: Siempre pon un mensaje dentro de <audio> o <video> para navegadores antiguos.
• Archivos locales: Organiza tus multimedia en carpetas como audio/ o videos/ y usa rutas relativas.

Que ha aprendidos hoy:

• <audio>: Incrusta sonidos con controles, soporta MP3, OGG, WAV, y usa <source> para múltiples formatos.
• <video>: Añade videos con controles, subtítulos (<track>), y soporta MP4, WebM, OGG.

Con <audio> y <video>, tu web se vuelve más viva y atractiva. ¿Te animas a crear una página con tu música o video favorito? El siguente capítulos llegamos a final de este curso, donde crearemos una pagina web sencilla con todos los conceptos que vemos tocado durante el curso.