Estoy tratando de ver si necesito importar un analizador VTT o si es posible para mí obtener HTML de <track src="transcript.vtt" /> . Parece que el soporte del navegador ya existe para analizar HTML para mostrarlo encima de un video, pero no puedo encontrar una manera de acceder a él fuera de un video.
¿Cómo podría lograr algo como esto:
<div> <random-video-player></random-video-player> <track src="transcript.vtt" /> <div id="transcript" > // show my VTT cues </div> </div> @ViewChild('track') track: HTMLTrackElement; track.cues.foreach(cue => { var cueHtmlSpecial = addSpecialAttributes(cue); document.getElementById("transcript").appendChild(cueHtmlSpecial) });Encontré un paquete que más o menos debería funcionar como lo necesito, pero me preguntaba si realmente era necesario un paquete. https://github.com/plussub/srt-vtt-parser
Si realmente solo desea analizar Web-VTT, entonces no, no necesita una biblioteca adicional.
De hecho, la API Web-VTT ya ofrece casi todo lo que necesita.
Para extraer las VTTCues de un archivo .vtt, necesitará un elemento <video>, pero no tiene que estar conectado al DOM y no tiene que apuntar a un archivo multimedia real, así que todo eso se descarga es el archivo .vtt:
const getCues = (url) => { // we need a <video> element, but it can stay disconnected // it also doesn't need to point to an actual media const vid = document.createElement("video"); const track = document.createElement("track"); track.default = true; vid.append(track); return new Promise((res, rej) => { track.onload = (evt) => res([...vid.textTracks[0].cues]); track.onerror = (evt) => rej("invalid url"); track.src = url; }); }; (async () => { const url = getVTTURL(); const cues = await getCues(url); // for the demo we log only a few properties from the VTTCue object console.log(cues.map(({text, startTime, endTime}) => ({text, startTime, endTime}))); })().catch(console.error); // only for this demo, we build a full .vtt file on the fly // and return an URL that points to this file. function getVTTURL() { let vttText = `WEBVTT`; for( let i=0; i<35; i++ ) { const t1 = (i + '').padStart(2 , '0'); const t2 = ((i+1) + '').padStart(2 , '0'); vttText += ` 00:00:${t1}.000 --> 00:00:${t2}.000 Test${i}` } const vttBlob = new Blob([vttText], { type: 'text/plain' }); return URL.createObjectURL(vttBlob); }