当用户点击视频字幕中的某个单词时，我必须突出显示该单词。因此，给定点击的坐标，问题是在提示字符串中找到单词索引。
有什么想法吗？这有可能吗？我说的是最新的 HTML5 触摸事件和 WebVTT 提示 https://www.w3.org/TR/webvtt1/ .
最佳答案
我认为传统的 WebVTT 提示不可能做到这一点 - 它们是伪元素，不直接属于 DOM，因此您无法将事件绑定(bind)到它们。::cues 的样式也极其有限。
但是，您应该能够利用 TextTrack 事件来完成类似的工作。您可以将自定义函数绑定(bind)到视频轨道的 oncuechange 事件，然后使用轨道的 activeCues 生成您自己的字幕。然后可以对这个自定义 div 进行样式设置并在其上添加您想要的任何事件。
这将从视频中获取第一个文本轨道，并在每次提示发生变化时从当前事件的提示中获取文本。
$('video')[0].textTracks[0].oncuechange = function() {
var currentCue = this.activeCues[0].text;
// add current cue text to custom caption div
}
您可能需要将提示的每个单词解析为自己的范围，以便您可以向其中添加事件、添加突出显示类等。然后您可以根据需要对每个部分进行样式设置/交互。
关于html - 突出显示视频字幕、HTML5 视频中的单词，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45387277/