Question

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

有什么想法吗？它有可能吗？我在谈论最新的HTML5触摸事件和WebVTT提示https://www.w3.org/TR/webvtt1/。

Answer 1

我认为传统的WebVTT提示无法实现这一点 - 它们是伪元素，它们不是DOM的直接组成部分，因此您无法将事件绑定到它们。样式对于:: cues也非常有限。

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

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

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

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

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

突出显示视频字幕，HTML5视频中的单词

1 个答案: