<track>: El elemento para pistas de texto incrustado

El elmento HTML <track> es usado como hijo de los elementos multimedia, <audio> y <video>. Este te deja especificar pistas de texto temporizadas (o datos basados en el tiempo), por ejemplo para manejar automáticamente los subtítulos. Las pistas de texto usan el formato WebVTT (archivos .vtt) o de pistas de texto para la web.

Categorías del contenido Ninguna
Contenido permitido Ninguno, es un empty element.
Omision de etiquetas Como es un elemento vacío, la etiqueta de inicio debe estar presente y la etiqueta de cierre no debe estar presente.
Padres permitidos Un elemento multimedia, <audio> o <video>.
Rol ARIA implícito No hay rol correspondiente.
Roles ARIA permitidos No hay roles permitidos.
Intefaz DOM HTMLTrackElement (en-US)

Atributos

Este elemento incluye los atributos globales.

default
Este atributo indica que esta pista de texto debe estar activada salvo que las preferencias del usuario indiquen que otra pista de texto es más apropiada. Este atributo solo puede ser usado en un elemento track por cada elemento multimedia.
kind
Este atributo indica como esta pensada para usarse la pista de texto. Si lo omites el valor por defecto es subtitles. If the attribute contiene un valor invalido usará el valor metadata (Las versiones de Chrome anteriores a la 52 tratan un valor inválido como subtitles). Las siguientes palabras clave están permitidas:
  • subtitles
    • Los subtítulos proporciona la traducción de contenido que no puede ser entendido por el espéctador. Por ejemplo diálogos o texto que no está en español en una película en español.
    • Los subtítulos puede contener información adicional, normalmente información extra sobre el escenario. Por ejemplo el texto al principio de las películas de Stars Wars, o la fecha, el tiempo, y la ubicación de una escena.
  • captions
    • Este valor provee una transcripción y posiblemente una traducción del audio.
    • Puede incluir información no verbal importante como anotaciones sobre la música o efectos de sonido. Tambien puede indicar la fuente de la anotación (por ejemplo: música, texto, caracteres).
    • Es adecuado para usuarios sordos o cuando el sonido está apagado.
  • descriptions
    • Descripción textual del conenido del video.
    • Adecuado para usuarios ciegos o cuando el video no se puede ver.
  • chapters
    • Los títulos de los capítulos estan pensados para ser usados cuando el usuario esta navegando a través del recurso multimedia.
  • metadata
    • Pistas de texto usadas por programas. No visibles para el usuario.
label
Da un título a la pista de texto que puedan entender los usuarios y que es usado por el navegador cuando esta mostrando la lista de pistas de texto disponibles.
src
Señala la dirección de la pista de texto (archivo .vtt). Debe ser una URL valida. Este atributo debe ser especificado y su URL debe tener el mismo origen que el documento, salvo que el elemento <audio> o <video> que sea padre del elemento track tenga un atributo crossorigin.
srclang
Señala el idioma de los datos de la pista de texto. Debe ser una etiqueta de idioma BCP 47 valida. Si al atributo kind se le da el valor de subtitles, entonces srclang debe ser definido.

Notas de uso

Tipos de datos para pistas de texto

El tipo de dato que el elemento track añade al elemento multimedia es fijado en el atributo kind, que puede tener los valores de subtitles, captions, descriptions, chapters or metadata. El elemento apunta a un archivo fuente que contiene texto temporizado que el navegador muestra cuando el usuario solicita datos adicionales.

Un elemento media no puede tener mas de un elemento track con el mismo valor en los atributos kind, srclang, y label a la vez.

Detectando cambios en las anotaciones

El subyacente TextTrack, indicado por la propiedad track, recive un evento  cuechange cada vez que la anotación que esta siendo actualmente presentada cambia. Est sucede incluso si la pista de texto no está asociada cun un elemento multimedia.

Si la pista de texto está asociada con el elemento multimedia, usando el elemento <track> como hijo del elemento <audio> o del elemento <video>, el evento cuechange es también enviado al HTMLTrackElement (en-US).

let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Además, puedes utilizar el controlador de eventos oncuechange:

let textTrackElem = document.getElementById("texttrack");

textTrackElem.oncuechange = (event) => {
  let cues = event.target.track.activeCues;
});

Ejemplos

<video controls poster="/imagenes/ejemplo.gif">
   <source src="ejemplo.mp4" type="video/mp4">
   <source src="ejemplo.ogv" type="video/ogv">
   <track kind="captions" src="captionsDeEjemplo.vtt" srclang="en">
   <track kind="descriptions" src="descripciónDeEjemplo.vtt" srclang="en">
   <track kind="chapters" src="capítulosDeEjemplo.vtt" srclang="en">
   <track kind="subtitles" src="subtítulosDeEjemplo_de.vtt" srclang="de">
   <track kind="subtitles" src="subtítulosDeEjemplo_en.vtt" srclang="en">
   <track kind="subtitles" src="subtítulosDeEjemplo_ja.vtt" srclang="ja">
   <track kind="subtitles" src="subtítulosDeEjemplo_oz.vtt" srclang="oz">
   <track kind="metadata" src="etapaClave1.vtt" srclang="en"
     label="Etapa clave 1">
   <track kind="metadata" src="etapaClave2.vtt" srclang="en"
     label="Etapa clave 2">
   <track kind="metadata" src="etapaClave3.vtt" srclang="en"
     label="Etapa clave 3">
   <!-- Fallback -->
   ...
</video>

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de 'track element' en esta especificación.
Living Standard
HTML5
La definición de 'track element' en esta especificación.
Recommendation Definición inicial.

Compatibilidad con los navegadores

BCD tables only load in the browser

Ver también