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

问题描述：

当用户点击视频时，我必须突出显示视频字幕中的单词。所以，给定tap的坐标，问题是在cue字符串中找到index字。突出显示视频字幕中的单词，HTML5视频

任何想法？这是可能的吗？我正在谈论最新的HTML5触摸事件和WebVTT线索https://www.w3.org/TR/webvtt1/。

第一个问题是要得到这个提示文本是真的。似乎没有什么方法可以从VTTCue API知道它（getBoundingClientRect会有很多帮助）我能想到的解决方法是实现自己的字幕显示... – Kaiido

似乎没有一个'TextTrack'支持'click'事件，，但你可以访问'activeCues' https://developer.mozilla.org/en-US/docs/Web/API/TextTrack 我不认为你希望目前是可能的，但您可以尝试将您的视频与Canvas API结合起来，以获得点击位置，类似于这个概念：https：//developer.mozilla.org/en-US/docs/Web/API/Canvas_API/ Manipulating_video_using_canvas 或者只是使用Canvas作为整个视频播放器。 – JHS

@JHS，为什么使用画布获得点击事件？您可以直接从视频中获取，也可以从视频顶部放置任何视觉元素。此外，字幕不会绘制在画布上。 – Kaiido

答

我不认为传统的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 
}

你可能会需要提示的每一个字解析为自己的跨度，以便您可以添加事件，添加亮点类，等等，那么你可以风格/每件互动，但是你会喜欢。

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

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

相关推荐