Estoy trabajando en una página con un reproductor de video en el que intento mostrar subtítulos vtt y obtener información de las señales en el elemento <track> .

Esto es lo que es relevante para el reproductor en HTML:

 <div class="video"> <video id="vid"> <source src="Video.mp4" type="video/mp4"> <track kind="subtitles" src="Captions.vtt" srclang="en"> </video> </div>

Primero tenía algo como esto en mi JavaScript, solo para ver lo que obtenía antes de manipular cualquier cosa en el código.

 var trackObject = $('track')[0].track; trackObject.mode = 'showing'; console.log('Track cues:'); console.log(trackObject.cues); console.log(trackObject.cues[0]);

El cambio en el atributo de mode se realiza allí porque, si configuro de default el elemento <track> en HTML, el video no aparece en muchos navegadores. Todavía no sé por qué.

Lo que esto imprime a la consola es lo siguiente:

Sin embargo, cuando TextTrackCueList , veo las señales:

Esto solo tiene sentido para mí si asumo que las señales se han cargado en el elemento, pero el atributo de length no se ha actualizado. Pero todavía no sé cuál es la longitud que veo al final de la lista, que muestra el número real de pistas.

No he encontrado ningún tipo de evento de carga en la pista de texto, así que esto es lo que hice para asegurarme de que puedo obtener las señales:

 var trackObject = $('track')[0].track; trackObject.mode = 'showing'; var waitForCues = setInterval(function() { if (trackObject.cues.length > 0) { var cueList = getTracks(trackObject) // ...Do some processing with the cues... clearInterval(waitForCues); } }, 40);

¿Por qué sucede esto con el atributo de length del elemento de pista? ¿Cómo puedo deshacerme de eso esperando que la longitud sea mayor que 0?