La Etiqueta TRACK

Se utiliza para agregar pistas de texto sincronizadas a elementos multimedia de audio o video.

La etiqueta <track> se utiliza para agregar pistas de texto sincronizadas (como subtítulos, descripciones de audio o capítulos) a elementos multimedia <video> o <audio>. Es esencial para mejorar la accesibilidad, ofrecer soporte multilingüe y enriquecer la experiencia del usuario. Aquí te explicamos cómo implementarla correctamente.

¿Qué es la etiqueta `<track>`?

Propósito: Vincular archivos de texto temporizados (por ejemplo, subtítulos en .vtt) a contenido multimedia.

Formatos soportados: WebVTT (.vtt) es el estándar, pero algunos navegadores admiten TTML o SRT.

Casos de uso:

Subtítulos en diferentes idiomas.
Transcripciones para personas sordas o con dificultades auditivas.
Capítulos para navegar en videos largos.
Descripciones de audio para personas con discapacidad visual.

Sintaxis básica

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track 
    kind="subtitles" 
    src="subtitles-es.vtt" 
    srclang="es" 
    label="Español"
    default
  >
</video>

Atributos clave

Atributo	Descripción
`kind`	Tipo de pista: `subtitles`, `captions`, `descriptions`, `chapters`, `metadata`.
`src`	Ruta al archivo `.vtt`.
`srclang`	Idioma de la pista (ej: `es`, `en`). Obligatorio si `kind="subtitles"`.
`label`	Nombre legible para mostrar en el menú del reproductor.
`default`	Indica que esta pista se carga automáticamente.

Crear un archivo WebVTT

Un archivo .vtt contiene marcas de tiempo y texto. Ejemplo (subtitles-es.vtt):

WEBVTT

00:00:01.000 --> 00:00:04.000
Hola, bienvenido al tutorial.

00:00:05.000 --> 00:00:08.000
Aprenderemos a usar la etiqueta &lt;track&gt;.

Formato:
HH:MM:SS.mmm --> HH:MM:SS.mmm (marcas de tiempo).
Líneas de texto debajo.
Nota: Guarda el archivo con codificación UTF-8.

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Video con subtítulos</title>
</head>
<body>
  <video controls width="600">
    <source src="video.mp4" type="video/mp4">
    <!-- Subtítulos en español -->
    <track 
      kind="subtitles" 
      src="subtitles-es.vtt" 
      srclang="es" 
      label="Español"
      default
    >
    <!-- Subtítulos en inglés -->
    <track 
      kind="subtitles" 
      src="subtitles-en.vtt" 
      srclang="en" 
      label="English"
    >
  </video>
</body>
</html>

Los usuarios pueden seleccionar subtítulos desde el menú del reproductor.

Tipos de pistas (`kind`)

Valor	Descripción
`subtitles`	Subtítulos para diálogos (traducciones). Requiere `srclang`.
`captions`	Subtítulos que incluyen sonidos no verbales (ej: aplausos).
`descriptions`	Descripciones de audio para personas con discapacidad visual.
`chapters`	Títulos de capítulos para navegar en el video.
`metadata`	Información para scripts (no visible al usuario).

Accesibilidad

Subtítulos: Permiten a personas sordas o con dificultades auditivas entender el contenido.
Descripciones de audio: Ayudan a usuarios con discapacidad visual.
Cumplimiento de estándares: Mejora el cumplimiento de leyes como la ADA o WCAG.

Soporte en navegadores

Navegadores modernos: Chrome, Firefox, Edge y Safari soportan <track> y WebVTT.
Internet Explorer: Soporte parcial (versiones antiguas pueden requerir polyfills).
Verificación: Usa herramientas como Can I Use.

Problemas comunes

Archivo .vtt no encontrado: Asegúrate de que la ruta en src sea correcta.
Codificación incorrecta: Guarda el archivo .vtt en UTF-8.
CORS: Si el archivo está en otro dominio, configura el servidor para permitir acceso.
Errores de sintaxis: Valida tus archivos .vtt con herramientas como WebVTT Validator.

Conclusión

La etiqueta <track> es indispensable para:

Hacer contenido multimedia accesible a diversos públicos.
Ofrecer soporte multilingüe mediante subtítulos.
Enriquecer la experiencia con capítulos o descripciones.

Pasos finales:

Crea tus archivos WebVTT con herramientas como Amara.
Prueba en múltiples navegadores.
Combínala con JavaScript para controles personalizados.

¡Ahora puedes integrar subtítulos y más en tus proyectos multimedia de manera profesional!

¿Qué es la etiqueta <track>?