HTML Course 6.4 Embedding audio and video (audio, video)

6.4 Embedding audio and video

1. Embedding Audio with <audio>

The <audio> element allows you to embed sound content in web pages. It supports multiple sources, controls, and fallback content.

1.1 Atributos principales

1.2 Ejemplo de audio con múltiples fuentes y texto de fallback

2. Embedding Video with <video>

El elemento <video> es análogo a <audio>. Permite insertar video en formatos múltiples, con controles, poster y subtítulos.

2.1 Atributos principales

2.2 Ejemplo de video con poster y subtítulos

3. Pistas y accesibilidad

• <track>: Permite añadir pistas de texto (subtítulos, descripciones de audio, capítulos).
• attribute kind: puede ser subtitles, captions, descriptions, chapters, metadata.
• attribute default: marca la pista activa por defecto.
• Formato recomendado: WebVTT (.vtt) para compatibilidad y facilidad de edición.

4. Interacción vía JavaScript

Los elementos <audio> y <video> exponen una API para controlar la reproducción y capturar eventos.

• Reproducción: media.play(), media.pause().
• Tiempo: media.currentTime (segundos), media.duration.
• Volumen y mute: media.volume (0 a 1), media.muted.
• Eventos útiles:
  • loadedmetadata: cuando ya se conocen duración y dimensiones.
  • timeupdate: actualizado cada vez que cambia el tiempo de reproducción.
  • ended: al finalizar.
  • canplay, canplaythrough: útil para controlar buffers.

4.1 Ejemplo JavaScript

<!-- HTML -->

Play
Pause

<script>
  const video = document.getElementById('miVideo');
  document.getElementById('btnPlay').addEventListener('click', ()=> {
    video.play(); // inicia reproducción
  });
  document.getElementById('btnPause').addEventListener('click', ()=> {
    video.pause(); // pausa reproducción
  });
  // Mostrar tiempo transcurrido
  video.addEventListener('timeupdate', ()=> {
    console.log('Tiempo actual:', video.currentTime.toFixed(2), 's');
  });
</script>

5. Buenas prácticas

• Ofrece múltiples formatos (MP4/WebM, MP3/OGG) para compatibilidad.
• Incluye controles nativos o personalizados accesibles.
• Proporciona subtítulos y descripciones para cumplir WCAG.
• Preload apropiadamente: evita descargar archivos pesados si no es necesario.
• Usa poster para mejorar la experiencia antes de cargar el vídeo.
• Considera la política de reproducción automática: muchos navegadores bloquean autoplay con sonido.

Con estas herramientas, podrás integrar audio y video de forma robusta, accesible y adaptable a distintos dispositivos y necesidades.