acerca de HTML

Referencia de etiquetas

Etiqueta track en HTML: subtítulos y archivos WebVTT

La etiqueta <track> incorpora una pista de texto sincronizada con un audio o vídeo, como subtítulos, captions o capítulos. Úsala para que alguien pueda seguir un diálogo sin entender su idioma o sin escuchar el sonido. La pista vive en un archivo separado: añadir la etiqueta no transcribe ni traduce automáticamente la grabación.

Ejemplo mínimo: captions en español

Descarga el clip local de la visita y su pista en español. Conserva esas rutas en tu sitio o cambia ambos src por las ubicaciones reales.

<video controls width="320" height="180"
  src="/ejemplos/track/visita.webm">
  <track kind="captions" src="/ejemplos/track/visita-es.vtt"
    srclang="es" label="Español (con sonidos)" default>
</video>

El reproductor ofrece una pista de captions en español. Al activarla aparecen las intervenciones y la indicación de una campana en los momentos correspondientes. Su presentación inicial depende de las preferencias del usuario y del navegador; requiere que el VTT se cargue correctamente. <track> por sí solo no dibuja un bloque de texto en la página.

Este fragmento enseña la asociación. Para publicar el contenido, conserva también la transcripción del caso práctico. Al retirar <track>, el vídeo sigue reproduciéndose, pero pierde esa pista seleccionable.

Sintaxis y contexto válido

<track> es un elemento vacío: no admite contenido ni etiqueta de cierre. Se coloca como hijo de <audio> o <video>, antes del texto alternativo interior. Si declaras fuentes mediante <source>, estas van primero y las pistas después. Cuando el reproductor tiene src, no añadas hijos <source>.

src es obligatorio y apunta al archivo de la pista; el archivo de sonido o vídeo pertenece al reproductor o a <source>. Estas reglas proceden del modelo de track del estándar HTML. Una pista no cambia el formato del medio ni crea controles de reproducción.

Subtitles frente a captions

kind="subtitles" identifica una transcripción o traducción del diálogo para quien oye el audio pero no lo comprende. kind="captions" incluye además la información auditiva necesaria: hablantes, sonidos significativos o música relevante. Por ejemplo, una campana que anuncia el comienzo de una visita debe tener una indicación textual en los captions.

Aunque en español ambos suelen llamarse subtítulos, decide el kind por el contenido y su propósito. Una traducción de dos frases que omite la campana no equivale a una pista accesible completa. La guía de captions de WAI explica esa diferencia y la necesidad de sincronizar texto y sonido.

Cómo escribir un archivo WebVTT

Guarda visita-es.vtt como texto UTF-8 con este contenido completo:

WEBVTT

00:01.000 --> 00:03.900
Ana: La visita empieza a las diez.

00:04.500 --> 00:05.600
[Suena una campana]

00:06.000 --> 00:09.500
Luis: Gracias. Nos vemos en la entrada.

WEBVTT abre el archivo y una línea vacía lo separa de los bloques. Cada bloque, llamado cue, tiene inicio, fin y texto. Los tiempos usan punto para los milisegundos; 00:01.000 equivale a un segundo. El fin debe ser posterior al inicio y los bloques se ordenan por su tiempo inicial. Una línea nueva dentro del texto permite dividirlo; una línea vacía separa bloques. La sintaxis de WebVTT fija estas reglas.

El servidor debe responder con Content-Type: text/vtt; renombrar un TXT o SRT no convierte su contenido. Sirve el ejemplo por HTTP desde tu sitio, en lugar de abrirlo con file://, para comprobar las condiciones de carga.

Usa el mismo origen para página y VTT. Si la pista está en otro origen, añade crossorigin="anonymous" al <video> o <audio> y configura las respuestas CORS del servidor remoto, incluido el medio que se cargue con ese modo. El atributo no concede permisos por sí mismo. Consulta las condiciones de origen de track y el funcionamiento de CORS.

Caso práctico: una visita con dos idiomas

El clip entregado es una animación original de unos diez segundos con voces sintetizadas en español y una campana generada. Ana habla cerca del segundo 1; la campana suena cerca del 4,5; Luis responde cerca del 6. La imagen representa a ambos junto a la entrada de una biblioteca.

Además del WebM y los captions anteriores, descarga la traducción al inglés, cuyo archivo completo es:

WEBVTT

00:01.000 --> 00:03.900
Ana: The visit starts at ten.

00:06.000 --> 00:09.500
Luis: Thank you. See you at the entrance.

Inserta este HTML en el cuerpo de un documento con lang="es", codificación UTF-8 y viewport móvil. No necesita CSS ni JavaScript:

<section aria-labelledby="track-visita-titulo">
  <h2 id="track-visita-titulo">Visita a la biblioteca</h2>
  <video controls width="320" height="180" preload="metadata"
    aria-labelledby="track-visita-titulo">
    <source src="/ejemplos/track/visita.webm" type="video/webm">
    <track kind="captions" src="/ejemplos/track/visita-es.vtt"
      srclang="es" label="Español (con sonidos)" default>
    <track kind="subtitles" src="/ejemplos/track/visita-en.vtt"
      srclang="en" label="English">
    Tu navegador no admite el elemento video.
  </video>
  <p><a href="/ejemplos/track/visita.webm" download>Descargar vídeo</a></p>
  <h3>Transcripción completa</h3>
  <p>Ana: La visita empieza a las diez.</p>
  <p>[Suena una campana]</p>
  <p>Luis: Gracias. Nos vemos en la entrada.</p>
  <p>La imagen muestra a Ana y Luis junto a la entrada de la biblioteca.</p>
</section>

Las pistas describen el mismo clip; el menú permite elegirlas según la interfaz del navegador. Solo los captions incluyen la campana. La transcripción exterior permanece disponible al ocultar las pistas, al fallar el vídeo y sin JavaScript. El texto interior del reproductor sirve para navegadores que no reconocen <video>, no como transcripción visible ante un error de red. WAI recomienda que la transcripción sea fácil de encontrar.

Comprobaciones paso a paso

  1. Reproduce el clip, llega a los controles con Tab y prueba reproducir, pausar y seleccionar una pista con el teclado. Comprueba también el menú en tu móvil: los botones y las teclas disponibles varían.
  2. Selecciona español y verifica las frases y la campana en sus intervalos. Cambia a inglés: cambia el diálogo mostrado, sin traducir el sonido ni añadir la campana a esa pista.
  3. En la pestaña Red, comprueba las URLs, respuestas correctas y text/vtt. Una pista desactivada puede no descargarse hasta seleccionarla.
  4. Desactiva las pistas: desaparece el texto superpuesto y se mantienen vídeo y transcripción. Retira un <track> en una copia: desaparece su opción. Desactiva JavaScript y recarga: los controles nativos siguen funcionando.
  5. Provoca un 404 en la URL del VTT y restaúrala después. La pista falla, pero la reproducción y la transcripción exterior siguen disponibles. Si cambias los tiempos del VTT, el texto se desplaza respecto al audio: vuelve a revisar la sincronización.

Atributos y sus límites

  • kind: subtitles, captions, descriptions, chapters o metadata. Si se omite se interpreta como subtitles; un valor inválido se interpreta como metadata.
  • src: URL obligatoria del archivo de la pista.
  • srclang: idioma con una etiqueta BCP 47, como es o en. Obligatorio para subtitles; conveniente también para captions.
  • label: nombre legible para distinguir pistas. Si se incluye, debe tener contenido.
  • default: booleano que propone una pista inicial según las preferencias del usuario. default="false" conserva el atributo; para retirarlo, omítelo.

No dupliques pistas con el mismo kind, idioma y label. El estándar limita default por reproductor: uno para el grupo conjunto subtitles/captions, uno para descriptions y uno para chapters; metadata no tiene ese límite. El ejemplo usa únicamente uno.

descriptions contiene descripciones textuales de lo visual; declararlo no garantiza una audiodescripción hablada en todos los reproductores. chapters aporta títulos temporales para navegación mediante scripts, sin garantizar un menú nativo. metadata contiene datos para scripts, sin subtítulos visibles. Son funciones distintas de los captions.

id, class y lang son atributos globales; lang no sustituye a srclang. CSS puede personalizar captions mediante ::cue; no es un atributo de <track>. La propiedad JavaScript TextTrack.mode controla disabled, hidden o showing: hidden procesa la pista sin mostrarla. No escribas mode como atributo HTML.

Errores frecuentes y preguntas

¿Track acepta un texto cualquiera? No. Necesita un archivo de pistas admitido, como WebVTT válido. Un párrafo dentro de <track> no crea captions.

¿Default fuerza los subtítulos siempre? No. Intervienen las preferencias y el navegador; comprueba la selección inicial y permite cambiarla.

¿Por qué no aparecen? Revisa, en orden, el padre y las rutas, la selección de la pista, la respuesta HTTP/MIME y CORS, el encabezado y los tiempos del VTT. Asegúrate de reproducir dentro de un intervalo con texto. Con kind="metadata" no se mostrarán como captions.

<video> proporciona el reproductor visual; la guía de audio explica sonido y transcripciones. La guía de source desarrolla archivos alternativos del medio. <track> añade texto temporal a esos reproductores, mientras que una transcripción HTML permite leer el contenido sin seguir su reloj.

Compatibilidad y fuentes

Consultado el 4 de octubre de 2026: MDN considera track ampliamente disponible, y sus datos de compatibilidad registran soporte desde Chrome 23, Firefox 31 y Safari 6. Eso no garantiza la misma interfaz para cada tipo de pista ni el mismo soporte del códec de vídeo.

Los ejemplos se comprobaron en Chromium 153. Para publicar otro medio, revisa en los navegadores de tu público la carga, selección, sincronización y accesibilidad del reproductor. Las fuentes enlazadas explican las reglas de HTML, WebVTT y las alternativas accesibles.