I'm just started on a new project. I am working with a court transcript and a video deposition. I would like to create a web player that sync's the transcript file with the video. I am trying to figure out where to start with this. I already have converted the transcript to Webvtt and I was thinking I could leverage the Webvtt with the output by reading the events on the viewer to sync with the lines of the transcript.
I want to do something similar to this: Sync Deposition Transcript
I am think I would take the Webvtt data and put them in an unordered list. Then use the timeupdate event to get the video time to change the scroll position of the document.
var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};
I'm working on the prototype now. But I wanted to know if this is right way to go or is there something out there that already can do part of this.
I'd suggest you pull the captions through the TextTrackCueList list. In the simplest example, loop through the cues collection to get your VTT captions:
const video = document.getElementById('video')
const track = video.textTracks[0]
// loop through track.cues to get entire VTT data
// loop through track.activeCues to get the cues that should be highlighted
track.oncuechange = function (){
// update highlights
}