Curso HTML 12.5 Subtítulos y pistas en video (track: subtitles, captions)

Curso HTML 12.5 Subtítulos y pistas en video (<track>: subtitles, captions)

El elemento <track> permite asociar archivos de texto con datos temporales (WebVTT) a un elemento <video> o <audio>. De esta forma podemos añadir subtítulos, transcripciones, descripciones de audio o capítulos de navegación. Los principales valores del atributo kind son:

Atributos principales de <track>

• src: URL del archivo WebVTT.
• kind: tipo de pista (subtitles, captions, etc.).
• srclang: idioma de la pista (es, en, fr).
• label: etiqueta legible para el usuario en la UI del reproductor.
• default: indica qué pista se activa por defecto.

Ejemplo básico de video con subtítulos y captions

<video controls width='640' height='360'>
  <source src='mi-video.mp4' type='video/mp4'>
  <track kind='subtitles' srclang='en' label='English Subtitles'
         src='subtitulos_en.vtt' default>
  <track kind='subtitles' srclang='es' label='Subtítulos Español'
         src='subtitulos_es.vtt'>
  <track kind='captions' srclang='es' label='Captions Español'
         src='captions_es.vtt'>
  <p>Tu navegador no soporta vídeo HTML5.</p>
</video>
  

Formato de archivo WebVTT

WebVTT (Web Video Text Tracks) es un formato de texto simple. Cada bloque define un rango temporal y su texto:

WEBVTT

00:00:00.000 --> 00:00:03.000
Bienvenidos a este tutorial sobre HTML5.

00:00:03.500 --> 00:00:07.000
Hoy veremos cómo usar <track> para subtítulos.

00:00:07.500 --> 00:00:10.000
¡Empecemos!
  

Pistas de captions con descripciones de sonido

WEBVTT

00:00:00.000 --> 00:00:02.500
[Música suave de fondo]

00:00:02.500 --> 00:00:04.000
Hombre: ¡Hola! ¿Cómo estás?

00:00:04.000 --> 00:00:06.000
| Aplausos y risas de la audiencia
  

Cambiar pista mediante JavaScript

Podemos listar y seleccionar pistas activas con la API TextTrack:

<video id='miVideo' controls>
  <source src='mi-video.mp4' type='video/mp4'>
  <track kind='subtitles' srclang='es' label='ESP' src='sub_es.vtt'>
  <track kind='subtitles' srclang='en' label='ENG' src='sub_en.vtt'>
</video>

<script>
  const video = document.getElementById('miVideo');
  video.addEventListener('loadedmetadata', ()=>{
    // Obtener todas las pistas
    const pistas = video.textTracks;
    // Desactivar todas
    for(let i=0; i<pistas.length; i++){
      pistas[i].mode = 'disabled';
    }
    // Activar la primera pista
    pistas[0].mode = 'showing';
  });

  function activarIdioma(codigo) {
    for(let t of video.textTracks){
      t.mode = (t.language === codigo) ? 'showing' : 'disabled';
    }
  }
</script>
  

Buenas prácticas y accesibilidad

• Ofrecer siempre subtítulos en varios idiomas y captions si hay sonido relevante.
• Marcar la pista por defecto con default para el idioma principal de la audiencia.
• Validar sintaxis WebVTT con herramientas (por ejemplo webvttvalidator).
• Incluir descripciones de sonido para personas con discapacidad auditiva.
• Proveer opción de desactivar todas las pistas si el usuario lo desea.

Con todo esto, tus vídeos HTML5 serán accesibles, navegables y adaptables a diferentes idiomas y necesidades.