寻找使用 HTML 5 和 Webvtt 与文档同步视频的想法
Looking for ideas to video sync with a document with HTML 5 and Webvtt
我刚刚开始一个新项目。我正在处理法庭笔录和视频证词。我想创建一个网络播放器，将转录文件与视频同步。我想弄清楚从哪里开始。我已经将成绩单转换为 Webvtt，我想我可以通过读取查看器上的事件来利用 Webvtt 的输出，以与成绩单的行同步。
我想做类似的事情：
Sync Deposition Transcript
我想我会把 Webvtt 数据放在一个无序列表中。然后使用timeupdate事件获取视频时间来改变文档的滚动位置。
var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};
我现在正在制作原型。但我想知道这是否是正确的方法，或者是否有一些东西已经可以做到这一点。
我建议您通过 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
}
我刚刚开始一个新项目。我正在处理法庭笔录和视频证词。我想创建一个网络播放器，将转录文件与视频同步。我想弄清楚从哪里开始。我已经将成绩单转换为 Webvtt，我想我可以通过读取查看器上的事件来利用 Webvtt 的输出，以与成绩单的行同步。
我想做类似的事情： Sync Deposition Transcript
我想我会把 Webvtt 数据放在一个无序列表中。然后使用timeupdate事件获取视频时间来改变文档的滚动位置。
var vid = document.getElementById("myVideo");
vid.ontimeupdate = function() {myFunction()};
我现在正在制作原型。但我想知道这是否是正确的方法，或者是否有一些东西已经可以做到这一点。
我建议您通过 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
}