Javascript 寻找与HTML 5和Webvtt文档视频同步的想法

我刚开始一个新项目。我正在处理法庭记录和录像。我想创建一个网络播放器，将成绩单文件与视频同步。我在想从哪里开始。我已经将成绩单转换为Webvtt，我想我可以通过读取查看器上的事件来利用Webvtt和输出，从而与成绩单的行同步

我想做类似的事情：

我想我会把Webvtt数据放在一个无序的列表中。然后使用timeupdate事件获取视频时间以更改文档的滚动位置

var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};

---

我现在正在做原型。但我想知道这是不是一条正确的道路，或者是否有什么东西已经可以部分做到这一点

我建议你从TextTrackCueList列表中提取标题。在最简单的示例中，循环使用cues集合以获取VTT标题：

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
}