javascript - 寻找使用 HTML 5 和 Webvtt 与文档进行视频同步的想法

Question

我刚刚开始一个新项目。我正在处理法庭笔录和视频证词。我想创建一个网络播放器，将转录文件与视频同步。我正在尝试弄清楚从哪里开始。我已经将脚本转换为 Webvtt，我想我可以通过读取查看器上的事件来利用 Webvtt 的输出，以与脚本的行同步。

我想做类似的事情: Sync Deposition Transcript

我想我会获取 Webvtt 数据并将它们放入无序列表中。然后使用timeupdate事件获取视频时间来改变文档的滚动位置。

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

我现在正在制作原型(prototype)。但我想知道这是否是正确的方法，或者是否有一些东西已经可以做到这一点。

Answer 1

我建议您通过 TextTrackCueList 列表提取字幕。在最简单的示例中，循环遍历提示集合以获取 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
}