Etiqueta HTML <track>
La etiqueta <track> añade subtítulos, leyendas, descripciones, capítulos o metadatos a <audio> y <video> mediante archivos WebVTT.
La etiqueta <track> es uno de los elementos HTML5. Añade pistas de texto sincronizadas — subtítulos, leyendas, descripciones, capítulos o metadatos — a un elemento multimedia <video> o <audio>. Una pista es la forma estándar de hacer que los medios sean accesibles: permite que los espectadores sordos o con dificultades auditivas lean lo que se dice, permite que los hablantes no nativos sigan el contenido y permite que los navegadores ofrezcan navegación por capítulos.
El elemento <track> siempre es un elemento hijo de un elemento <video> o <audio>, colocado después de los elementos <source>. Es vacío y apunta (a través de src) a un archivo externo WebVTT (.vtt) que contiene el texto sincronizado. El navegador muestra ese texto automáticamente mientras se reproduce el medio.
Un único elemento multimedia puede contener varios elementos <track> — por ejemplo, uno para cada idioma — pero no puede tener dos pistas que compartan el mismo kind, srclang y label.
Sintaxis
La etiqueta <track> es vacía, lo que significa que no se requiere la etiqueta de cierre. Sin embargo, en XHTML, la etiqueta <track> debe cerrarse automáticamente (<track />).
Etiqueta HTML <track>
<audio> or <video>
...
<track src="...">
...
</audio> or </video>Ejemplo de la etiqueta HTML <track>:
Etiqueta HTML <track>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
default | default | Marca la pista como la que se habilitará por defecto, a menos que las preferencias del usuario indiquen que otra es más apropiada. Solo una pista por elemento multimedia puede tener este atributo. |
kind | subtitles, captions, descriptions, chapters, metadata | Define el tipo de pista de texto (consulta la tabla siguiente). El valor predeterminado es subtitles. |
label | text | Un título legible por humanos para la pista. Es el nombre que se muestra al usuario en el menú de selección de pistas del reproductor (p. ej., "English", "Français"). |
src | URL | La ruta al archivo WebVTT (.vtt). Obligatorio. |
srclang | language_code | El idioma del texto de la pista como etiqueta BCP 47 (p. ej., en, fr, pt-BR). Obligatorio cuando kind="subtitles". |
Valores del atributo kind
| Valor | Propósito |
|---|---|
subtitles | Traducción del diálogo para espectadores que pueden escuchar pero que quizás no entienden el idioma. Requiere srclang. |
captions | Una transcripción del diálogo más sonidos que no son habla (efectos de sonido, señales musicales, quién está hablando). Destinado a espectadores sordos y con dificultades auditivas. |
descriptions | Descripciones de texto del contenido visual del video, destinadas a ser leídas en voz alta (voz sintetizada) para usuarios ciegos o con baja visión cuando la acción no se transmite por el audio. |
chapters | Títulos de capítulos utilizados para navegar por el medio. |
metadata | Datos para uso de scripts. Esta pista no se muestra al usuario. |
La etiqueta <track> también admite los atributos globales y los atributos de evento.
¿Qué es un archivo WebVTT?
El texto que muestra una <track> reside en un archivo separado escrito en el formato WebVTT (Web Video Text Tracks), guardado con la extensión .vtt y servido como text/vtt. Todo archivo WebVTT comienza con la línea WEBVTT, seguida de una o más señales (cues). Cada señal tiene un rango de tiempo (inicio --> fin, en hh:mm:ss.ttt) y el texto que se mostrará durante ese rango:
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the demo video.Puedes tener muchas señales, opcionalmente separadas por líneas en blanco, y cada señal puede llevar una línea de ID opcional encima de su marca de tiempo. El navegador hace coincidir el tiempo de reproducción actual con una señal y renderiza su texto sobre el medio.
Ejemplo de múltiples pistas
Una configuración habitual es ofrecer leyendas en un idioma y subtítulos en otro. Asigna un label claro a cada pista para que los usuarios puedan elegir la correcta en el menú del reproductor, y marca una sola pista como default:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video
controls
width="320"
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
>
<track
default
kind="captions"
srclang="en"
label="English"
src="captions-en.vtt"
/>
<track
kind="subtitles"
srclang="fr"
label="Français"
src="subtitles-fr.vtt"
/>
</video>
</body>
</html>El reproductor muestra una entrada "English" y una entrada "Français" en su menú de subtítulos/leyendas; las leyendas en inglés aparecen por defecto porque esa pista lleva el atributo default.
Accesibilidad
El elemento <track> es el mecanismo HTML para cumplir con los criterios de éxito clave de WCAG:
- Leyendas (WCAG 1.2.2) — proporciona una
<track kind="captions">para que los usuarios sordos y con dificultades auditivas puedan percibir tanto el diálogo como los sonidos importantes en los medios pregrabados. - Descripción de audio (WCAG 1.2.3 / 1.2.5) — proporciona una
<track kind="descriptions">para que los usuarios ciegos y con baja visión obtengan una descripción de la información visual importante.
Dado que el texto de la pista es texto sincronizado en un archivo separado, los motores de búsqueda y las tecnologías de asistencia también pueden leerlo, lo que mejora tanto la accesibilidad como la capacidad de descubrimiento.