El Elemento Track se encarga de añadir "Subtitulos" o "Pistas" a los Elementos de Video y Audio dependiendo de su uso.

La forma de añadirlos es muy facil, se puede hacer directamente con HTML o añadirlo a un video con Javascript.

<video width="600" height="400" controls>
	<source src="video.mp4" type="video/mp4">
	<track src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español">
	<track src="subtitulos2.vtt" kind="subtitles" srclang="en" label="English">
</video>

Como ven el Elemento Track va dentro de un Video, ademas se pueden añadir multiples "Tracks" dentro de un mismo Video.

<track src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español" default>

Atributos:

src	Url donde se encuentra el archivo Track (debe estar en el mismo servidor). Solo acepta los formatos WebVTT y TTML.
kind	Especifica de que tipo es el Track: "captions", "chapters", "descriptions", "metadata", "subtitles".
srclang	Señala el lenguaje del Track.
label	Especifica el nombre del Track.
default	Especifica si este Track sera el que se muestre por defecto.

Formato WebVTT

El formato WebVTT es muy facil de entender:

WEBVTT //La palabra WEBVTT obligatoria.

Cue1 //Una Etiqueta (no es obligatoria).
00:00:01.000 --> 00:00:10.000 //Del tiempo que inicia al tiempo que acaba en formato hh:mm:ss.sss
Este es el primer subtitulo. //El Texto que va a mostrarse

Veamos un Ejemplo

WEBVTT

00:00:01.000 --> 00:00:10.000
Este es el primer subtitulo.

00:00:15.000 --> 00:00:20.000
Este es el segundo subtitulo.
Tambien soporta varias lineas.

Hasta Aqui seria lo basico. Ahora veremos el Objeto TextTrack.

El Objeto TextTrack

El Objeto TextTrack nos permite acceder a las propiedades de un Track mediante javascript.

Podemos acceder a los Tracks existentes de un video de la siguiente forma:

<video id="video" src="video.mp4" controls>
	<track src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español">
</video>
<script>
 	//Primero accedemos al Elemento con id "video" y luego llamamos la propiedad "textTracks".
	var TextTracks = document.getElementById("video").textTracks;
	//Nos devolvera una lista con los TextTracks del Video.
	var TextTrack = TextTracks[0];//Seleccionamos el primer TextTrack.
</script>

La propiedad "textTracks" nos devuelve una lista con los Objetos TextTrack del video, luego seleccionamos el primer TextTrack de la lista, asi podemos trabajar con el.

Eventos de la propiedad textTracks:

onaddtrack	Se ejecuta cuando se añade un nuevo TextTrack.	textTracks.onaddtrack = mifuncion(); //Se le asigna a una funcion.
onremovetrack	Se ejecuta cuando quitamos TextTrack.	textTracks.onremovetrack = mifuncion(); //Se le asigna a una funcion.

Tambien podemos acceder al Objeto TextTrack mediante la propiedad "track".

<video src="video.mp4" controls>
	<track id='track' src="subtitulos1.vtt" kind="subtitles" srclang="es" label="Español">
</video>
<script>
	//Esta ves accedemos al Elemento con id "track" y llamamos a la propiedad "track".
	var TextTrack = document.getElementById("track").track;
	//Nos devuelve un unico objeto TextTrack.
</script>

Tambien es posible crear nuevos Tracks con el metodo "addTextTrack()"

<video id="video" src="video.mp4" controls>
</video>
<script>
	var video = document.getElementById("video");//Accedemos al elemento con id "video".
	video.addTextTrack("subtitles", "NuevoSubtitulo", "es");//Añadimos al video un nuevo TextTrack vacio.
	var TextTrack = video.textTracks[0];
	//Seleccionamos el primer TextTrack, en este caso el unico.
</script>

El metodo "addTextTrack()" usa 3 argumentos: kind, label y srclang. En ese orden.
"kind" especifica el tipo del TextTrack, "label" el nombre y "srclang" es el lenguaje.

El objeto Track tambien tiene propiedades a las que podemos acceder:

cues	Devuelve una lista de todos los cues del TextTrack. Cada cue contiene datos del texto que se muestra en el subtitulo.
activeCues	Devuelve una lista de los cues activos en ese momento.
kind	Devuelve el tipo del Track.
label	Especifica el nombre del Track.
language	Devuelve el lenguaje del Track.
mode	Especifica el modo del Track: "showing" Habilitado, "hidden" oculto y "disabled" desactivado.

Eventos del Objeto textTrack:

oncuechange

Se ejecuta cuando un Cue aparece o desaparece.

//TextTrack representa a un unico Track. TextTrack.oncuechange = mifuncion(); //Se le asigna a una funcion.

Bueno ahora veremos de que tratan los cues:

Un cue contiene informacion del texto que se va a mostrar, en que momento se mostrara, cuando finalizara, posicion y alineacion.

Podemos acceder a ellos de la siguiente forma:

var video = document.getElementById("video");//Accedemos al elemento con id "video".
var TextTrack = video.textTracks[0];//Seleccionamos el primer TextTrack.
var Cues = TextTrack.cues;//Nos devuelve una lista de todos los cues.
var Cue = Cues[0];//Seleccionamos el primer cue;

Tambien podemos añadir nuevos cues:

var video = document.getElementById("video");//Accedemos al elemento con id "video".
var TextTrack = video.textTracks[0];//Seleccionamos el primer TextTrack.
//Aqui empiezan los problemas de compatibilidad.
//Para Internet Explorer
TextTrack.addCue(new TextTrackCue(0, 10, "Mi nuevo subtitulo"));

//Para Chrome, Firefox, etc
TextTrack.addCue(new VTTCue(0, 10, "Mi nuevo subtitulo"));
//Inicia en el segundo 0, termina en el segundo 10 y muestra el texto "Mi nuevo subtitulo"

Como vemos para la mayoria de navegadores se usa el constructor VTTCue, pero para IE se usa TextTrackCue.

El constructor consta de 3 argumentos: el tiempo en segundos cuando se inicia, cuando termina y el Texto que se va a mostrar.

Propiedades del Objeto Cue

startTime	Tiempo en segundos en el que se muestra.
endTime	Tiempo en segundos en el que desaparece.
text	Texto que muestra.
align	Alineacion horizontal del cue: "start", "middle", "end", "left" y "right".
line	Linea en la que se encuentra.
position	Posicion horizontal del Cue.
size	Tamaño del texto, va de 0 a 100.
snapToLines	Especifica si esta fijo a una linea, puede ser true o false.
vertical	Especifica si esta en vertical y en que direccion, puede ser "" no vertical, "lr" y "rl".
pauseOnExit	Especifica si el video se va a pausar cuando el cue termine de mostrarse.

Eventos del Objeto Cue:

onenter	Se ejecuta cuando el cue aparece.	var Cue = cues[0];//Cue representa un unico Cue. Cue.onenter = mifuncion(); //Se le asigna a una funcion.
onexit	Se ejecuta cuando el cue desaparece.	var Cue = cues[0];//Cue representa un unico Cue. Cue.onexit = mifuncion(); //Se le asigna a una funcion.

Bueno gracias por leer esta Entrada, todo esto lo recopile de distintas fuentes de las cuales la mayoria estaba en ingles por eso quise hacer una documentacion en español.

html, html5, video, subtitulos, añadir subtitulos a un video, html track, text track, propiedades del elemento track, text track javascript, webvtt subtitulos, vtt subtitulos.