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

Question

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

我想做类似的事情： 同步沉积记录

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

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

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

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
}

Answer 2

我发现一个W3C博客，其中说我们可以包含指向同步视频的某些部分的文本内容、幻灯片或超链接索引表，例如this。在该视频中，它是隐藏式字幕 (cc)。但我认为这种技术也可以用于创建可滚动的文字记录。我们还必须使用 JavaScript。