2

当用户点击它时，我必须突出显示视频字幕中的一个词。因此，给定点击的坐标，问题是在提示字符串中找到单词索引。

有任何想法吗？有可能吗？我说的是最新的 HTML5 触摸事件和 WebVTT 提示https://www.w3.org/TR/webvtt1/。

4

1 回答 1

3

我认为传统的 WebVTT 提示不可能做到这一点——它们是伪元素，不直接属于 DOM，因此您不能将事件绑定到它们。::提示的样式也非常有限。

但是，您应该能够利用 TextTrack 事件来完成以类似方式工作的事情。您可以将自定义函数绑定到视频轨道的 oncuechange 事件，然后使用轨道的 activeCues 生成您自己的字幕。然后可以设置此自定义 div 的样式并在其上包含您想要的任何事件。

这将从您的视频中抓取第一个文本轨道，并在每次提示发生变化时从当前活动的提示中获取文本。

$('video')[0].textTracks[0].oncuechange = function() { 
    var currentCue = this.activeCues[0].text;
    // add current cue text to custom caption div
}

您可能需要将提示的每个单词解析为自己的跨度，以便您可以向其中添加事件、添加高亮类等。然后您可以根据需要对每个片段进行样式/交互。

https://developer.mozilla.org/en-US/docs/Web/API/TextTrack

于 2017-10-31T21:16:00.637 回答