在视频字幕、HTML5 视频中突出显示单词答案

【问题标题】：Highlight a word in video captions, HTML5 video在视频字幕、HTML5 视频中突出显示单词
【发布时间】：2018-01-05 08:05:21
【问题描述】：

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

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

【问题讨论】：

第一个问题是找到这个提示文本的真正位置。似乎没有任何方法可以从 VTTCue API 知道它（getBoundingClientRect 会有很大帮助）我能想到的解决方法是自己实现字幕显示......
似乎TextTrack 不支持click 事件，但您可以访问activeCues developer.mozilla.org/en-US/docs/Web/API/TextTrack 我认为您想要的目前不可能，但您可以尝试将您的视频与 Canvas API 相结合以获得点击位置，在概念上类似于：developer.mozilla.org/en-US/docs/Web/API/Canvas_API/… 或者只是将 Canvas 用于整个视频播放器。
@JHS，为什么要使用画布来获取点击事件？您可以直接从视频中获取它，也可以从可以放置在视频顶部的任何视觉元素中获取它。此外，字幕不会绘制在画布上。

标签： html video touch-event captions webvtt

【解决方案1】：

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

【讨论】：