<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.

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.

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.

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;
});

<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>

• El formato WebVTT para pistas de texto
• HTMLMediaElement.textTracks (en-US)