CODEWITHSUNDEEP
javascripthtml5-videowebvtt
Eric
Eric

Reputation: 1068

Looking for ideas to video sync with a document with HTML 5 and Webvtt

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.

Upvotes: 1

Views: 465

Answers (2)

Bharath Chand
Bharath Chand

Reputation: 66

I found a W3C blog which says that we can include text content, slide or hyperlink table of index that points to certain part of the video synced, like this. In that video it is closed caption (cc). But I think this technique can be used for creating scrollable transcript as well. We'd have to use javascript as well.

Upvotes: 0

TimHayes
TimHayes

Reputation: 3724

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
}

Upvotes: 1

Related Questions