Curso HTML 6.4 Inserción de audio y video (audio, video)

6.4 Inserción de audio y video en HTML5

HTML5 incorpora dos elementos nativos para reproducir contenido multimedia sin necesidad de plugins externos:

• <audio>: para contenido de audio.
• <video>: para contenido de video.

Ambos elementos permiten incluir múltiples fuentes, atributos de control y contenido alternativo para navegadores que no soporten HTML5.

1. Formatos y compatibilidad

No todos los navegadores soportan igual los códecs. Las extensiones más comunes son:

2. El elemento <audio>

Básico para incluir pistas de audio. Sus atributos más importantes:

• controls: muestra barra de reproducción (play/pause, volumen, etc.).
• autoplay: inicia reproducción automáticamente (ojo con el modo mutado en navegadores).
• loop: repite en bucle.
• muted: silencia la pista al cargarla.
• preload: puede ser auto (descarga completa), metadata (sólo metadatos) o none (nada hasta play).

Ejemplo de uso de <audio> con varias fuentes y fallback:

<audio controls preload='metadata'>
  <source src='audio/pista.mp3' type='audio/mpeg'>            <!-- MP3 para Chrome, Safari, Edge -->
  <source src='audio/pista.ogg' type='audio/ogg'>              <!-- Ogg Vorbis para Firefox, Chrome -->
  <source src='audio/pista.wav' type='audio/wav'>              <!-- WAV por compatibilidad -->
  Tu navegador no soporta el elemento de audio. Descarga la <a href='audio/pista.mp3'>pista MP3</a>.
</audio>
  

3. El elemento <video>

Permite reproducir vídeo nativo. Atributos clave muy parecidos a <audio>:

• width y height: dimensiones del reproductor.
• poster: imagen estática que se muestra antes de pulsar “play”.
• Controles: controls, autoplay, loop, muted, preload.

Ejemplo de <video> con pistas de subtítulos y múltiples fuentes:

<video width='640' height='360' controls poster='video/portada.jpg' preload='metadata'>
  <source src='video/pelicula.mp4' type='video/mp4'>   <!-- H.264/MP4: muy soportado -->
  <source src='video/pelicula.webm' type='video/webm'> -->VP8/VP9 vorbis <>
  <track kind='subtitles' srclang='es' label='Español' src='video/subs_es.vtt' default>
  <track kind='subtitles' srclang='en' label='English' src='video/subs_en.vtt'>
  Lo sentimos, tu navegador no soporta reproducir video. 
  <a href='video/pelicula.mp4'>Descárgalo aquí</a>
</video>
  

4. Etiqueta <track> para accesibilidad

Con <track> añadimos subtítulos, transcripciones, descripciones de audio o capítulos. Atributos:

• kind: subtitles, captions, descriptions, chapters, metadata.
• srclang: lenguaje (ISO 639-1).
• label: texto que describe la pista.
• src: URL del archivo .vtt (WebVTT).
• default: pista seleccionada por defecto.

5. Atributos detallados

controls

Muestra la interfaz de usuario nativa.

autoplay

Reproduce automáticamente (alerta: la mayoría de navegadores bloquean audio no muteado).

muted

Silencia la reproducción. Obligatorio para autoplay en muchos casos.

loop

Vuelve al inicio cuando termina.

preload

• none: no precarga.
• metadata: descarga sólo cabeceras (duración, tamaño).
• auto: precarga todo el archivo.

poster (sólo video)

URL de imagen que se muestra antes de reproducir.

6. Medios progresivos vs streaming

Por defecto el audio y vídeo HTML5 funcionan por descarga progresiva: el navegador baja datos a medida que se reproducen. Para streaming adaptativo (HLS, DASH) debes usar extensiones JS (hls.js, dash.js) o etiquetas específicas servidas por CDN.

7. JavaScript y la API de medios

Con JavaScript puedes controlar la reproducción, consultar el estado y reaccionar a eventos:

<video id='miVideo' width='320' height='180' controls>
  <source src='video/muestra.mp4' type='video/mp4'>
</video>

<script>
  const v = document.getElementById('miVideo');

  // Reproducir
  v.play().catch(err => console.warn('No autoplay:', err));

  // Pausar
  // v.pause();

  // Volumen al 50%
  v.volume = 0.5;

  // Eventos
  v.addEventListener('ended', () => console.log('Vídeo finalizado'));
  v.addEventListener('timeupdate', () => {
    console.log(`Tiempo transcurrido: ${v.currentTime.toFixed(1)}s`);
  });
</script>
  

8. Buenas prácticas

• Proporcionar al menos dos formatos de fuente para máxima compatibilidad.
• Incluir texto alternativo o enlaces de descarga para entornos sin soporte.
• Usar <track> para mejorar la accesibilidad a usuarios con discapacidad auditiva.
• No abusar de autoplay (mala experiencia de usuario).
• Optimizar tamaño y calidad de archivos (compresión, bitrate).

Con estos conceptos dominarás la inserción de audio y vídeo en tus páginas HTML5, ofreciendo una experiencia rica, accesible y compatible con la mayoría de navegadores.