问题标签 [webvtt]

I'm in the process of recreating the official videojs advanced player example.

So far so good, but I am wanting to add captions to each video in the playlist.

Is that possible?

I am using the following plugins:

• videojs-playlist
• videojs-playlist-ui

The videojs docs on tracks when implemented within a video tag are here:

http://docs.videojs.com/docs/guides/tracks.html

And they suggest using this HTML:

However, as I am using a playlist, I instantiate like this:

HTML

JS

Playlist Item Structure

As shown above, the playlist item structure looks like this:

Can captions be defined somewhere in that object?

Otherwise, how can captions be shown for each video in a playlist?

我有一个.m3u8 URL（用于跟踪）和一个.vtt URL（用于跟踪详细信息）。我正在 android 中开发一个收音机，其中每个曲目的详细信息都带有 .vtt 文件。

所以我的问题是如何在MediaPlayer.

我的收音机播放良好，但我无法获得曲目的详细信息。

Q.使用.vtt文件有什么需要？

答。因为收音机包含无限的歌曲，每首歌都有自己的细节。这就是为什么需要同步曲目及其细节的原因。

这是我的 .vtt 文件结构。

如果有人知道怎么做，请回答。

提前致谢。

比如说，我有一个 vtt 文件，我想从中获取 nodejs 环境中的所有提示及其相关属性，例如 startTime、endTime 等。

我已经搜索了所有我能想到的关键字，比如'parse vtt file by javascript'，但结果都是关于mozilla/vtt.js 的。但我不需要与浏览器/窗口交互，它只是一个静态 vtt 文件，我需要通过 JavaScript 从中提取数据。

有人可以给我一些提示吗？谢谢！

示例 vtt 内容：

我正在尝试构建一个实时视频字幕编辑器，并要求我获取当前视频帧的 VTTCue 信息（开始时间、结束时间、文本）。我该怎么做呢？谢谢。

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

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

我正在尝试构建一个正则表达式以在 .Net 环境中使用，这将允许我从 webvtt 文件中提取信息。

我想从可能是字幕的下一行中提取时间码信息和相应的信息，或者可能是其他信息。我遇到的问题是下一行的信息有时是一行，有时跨越多行，例如：

我需要确保我得到了所有这些，而不会无意中遇到下一组的开始。

我试过这个：

这个想法是它获取第一个时间码和之后的所有内容，但在下一次出现第一个时间码时再次停止，但它会捕获整个文件。

我也试过：

我意识到负前瞻在一开始是多余的。在这里，我试图将时间码放入单独的组中，忽略该行的其余部分，然后从新行开始捕获所有内容，但这是跳过字幕文本而不跨越多行。

我似乎遇到的问题是我捕获的行太多，或者不够。

有没有办法告诉正则表达式匹配某些东西（例如第一个时间码）以及它之后的所有内容，然后在第一个匹配项被击中时重新开始？

我确信这一定是可能的，但我是使用正则表达式的新手，所以我发现它很困难。我不介意我是否必须将其分解为多个操作才能获得所需的结果。

所以我想要得到的是：

第一组：

或者

第二个（或第三个，取决于上述）：

然后：

其次是：

ETC

我的需要

html5 视频元素加载保存在不同域中的视频和 vtt 文件。

问题

vtt 未加载和错误Text track from origin has been blocked from loading: Not at same origin as the document, and parent of track element does not have a 'crossorigin' attribute.

我的调查

我知道需要使用 CORS，以便 vtt 可以成功加载到 html5 中。

我已经在服务器端为来自任何域的请求启用了 CORS。

有些文章说添加crossorigin或crossorigin="anonymous"到`元素可以完成这项工作，但它不起作用。根本没有加载视频或出现不同的错误

我把我的代码放在下面

我的视频和 webvtt 字幕没有同步。是否有 JavaScript 方法来管理 html5 原生播放器中的 webvtt 字幕同步/延迟/偏移？

我找到了这个库（https://github.com/florinn/vtt-shift），但它重写了磁盘上的 webvtt 文件。我更喜欢客户端方式与视频重新同步。

是否有任何可用于 java 的开源 VTT 解析器/验证器库？

我们为 Node 和 Python 找到了几个

• https://www.npmjs.com/package/webvtt
• https://github.com/kickstarter/caption_crunch
• https://www.npmjs.com/package/webvtt

我正在尝试以 hls 格式播放 roku 视频，我只是想知道有没有办法将 webvtt url 设置为字幕而不是将其嵌入 HLS 流中？