问题标签 [webvtt]

我想使用 HTML5 Text Tracks API (WebVTT) 使用本机浏览器实现来显示字幕——而不加载音频/视频。

怎样才能做到这一点？

我正在尝试使用 AVURLAsset 加载 webvtt 文件。

下面是我的代码。

问题1：总是进入“Loaded Block”，但是我发现avAsset的duration不完整，是不是数据没有加载？我应该如何修改它？

问题 2：我试图将它用于我的 avplayer 的字幕，但 AVMediaSelectionGroup 始终为空。我应该怎么办？

我正在尝试使用 WebVTT (.vtt) 字幕。

在 Firefox 上，字幕效果很好。在 Chrome 上，它甚至没有显示。

我在JSBin上做这个。

一些代码，以防万一：

是否可以将样式应用于 HTML5 视频播放器字幕轨道元素？我想将字幕移到媒体播放器之外。

我试过用css定位媒体播放器和track元素，都没有任何效果。

如果不可能，我可以用 jquery 读取字幕轨道元素的内容吗？我尝试使用 .html() 和 .val() 阅读内容 - 均无效。

我正在开发一个网页，该网页用作一系列将刻录到 DVD 的纪录片视频的前端。我们想利用 webm 视频的卓越压缩和 .vtt 文件提供的轻量级多语言解决方案。

但是，在 Chrome 中，我收到以下错误。

来自“file://”的文本轨道已被阻止加载：与文档的来源不同，并且轨道元素的父级没有“crossorigin”属性。因此，Origin 'null' 不允许访问。

Chrome 显然认为我的 index.html 与位于完全相同的本地文件夹中的 .vtt 文件的来源不同。据说其他浏览器也是这种情况（尽管我不记得是哪一个了）。

由于最终产品必须能够在任何用户的系统上本地运行，因此以下解决方案不适用于我的情况：

• 上传到网络服务器，这将修复它。（在我的情况下，它必须从 DVD 运行。）
• 将 Chrome 设置为允许从文件访问文件，如果您想在本地测试某些内容，这非常有用。（http://www.chrome-allow-file-access-from-file.com/）（但我不希望每个 DVD 用户破解他们的浏览器。）
• 摆弄 .htaccess （在网络服务器上工作，但据我了解，这些文件在本地无法工作。抱歉，我不记得此解决方案的链接。）
• 将字幕烘焙到视频中（DVD 上没有足够的空间用于所有语言）。

我正在使用 video.js，但如果可以解决此问题，我很乐意查看不同的框架。也很乐意使用其他类型的字幕（即 .srt）或不跟踪视频标签内的标签的东西。

一些解决方案提到启用 CORS ( http://enable-cors.org/ )。它是否适用于本地 .vtt 文件，或者它是一场大乱斗？

在此先感谢您的时间！

我想允许我的应用程序在上传时允许 .vtt 文件。现在它只接受 .txt 文件，但我想为字幕添加 .vtt 功能。

我试过这个*没有运气：

在这种情况下，正确的格式是什么？

昨天我开始使用HTML5 Autoplay并添加HTML5 Tag aka Subtitles。

我无法理解为什么当我播放 *.mp4 视频的样本时，它可以通过相对路径（file:///Users/user/Desktop/test.html）显示字幕，但是如果我执行文件例如，通过 Pycharm，它会在浏览器上生成此文件路径（http://localhost:63343/Desktop/test.html），并且可以很好地加载字幕。

所以我想知道是否有办法解决我的问题。如何通过绝对路径（file:///Users/user/Desktop/test.html）加载字幕。我在这里缺少什么吗？

我正在使用 google-chrome 作为网络浏览器。

更新：我正在尝试调试我的网页，并且在加载 VTT 文件时遇到与 Crossorigin 错误相同的错误。同样的人说他们能够通过禁用 Chrome 中的同源策略来解决这个问题。我尝试使用以下方式（open -a Google\ Chrome --args --disable-web-security）重新启动我的浏览器，但它对我的问题没有任何区别。

更新 2：我刚刚在替代浏览器 Safar（版本 9.0.2 (11601.3.9)）上测试了同样的问题。在 Safari 上，我可以看到带有 (file:///Users/user/Desktop/test.html) 的字幕和带有 ( http://localhost:63343/Desktop/test.html ) 的视频不显示。

使用 Google-Chrome（版本 47.0.2526.106（64 位））我可以双向播放视频，但我只能看到带有（http://localhost:63343/Desktop/test.html）的字幕。

在网上进一步搜索帮助我找到了CORS 设置属性，用户可以在其中将 crossOrigin 属性设置为（匿名）或（使用凭据）。我也试过了，结果是视频黑屏。

所以总而言之，我认为这是一个安全问题，而不是路径文件问题。

test.html 代码示例：

subtitles-en.vtt 文件代码示例：

我有一个带有多种语言的 WebVTT 字幕的视频。它们似乎在我们所有的目标浏览器上都能正常运行，除了MS Edge。

WebVTT 文件由 Amazon S3 提供（视频由同一个存储桶提供），并用正确的内容类型 (text/vtt) 进行标记。这些文件本身是有效的，我什至可以让它们在 MS Edge 中播放，只要它们来自与包含视频的页面相同的来源。

视频标签本身标有crossorigin="anonomous"。不过，我找不到任何说明对轨道资源进行跨域请求的文档。我也尝试过crossorigin="anonymous"上轨道，但没有运气。

S3 存储桶设置为允许来自任何地方的跨域 GET 请求。

这只是在Edge中坏了，还是我做错了什么？

编辑 视频的链接是http://workbench.mercuryanalytics.com/instructions/video/no-buttons/es.html

在 iOS/TVOS 上，是否可以从 URL 加载远程 .vtt 文件并将其用作字幕轨道，同时从 URL 加载远程 HLS 视频（与在 m3u8 播放列表中指定的 VTT 相反）？

伪代码：

编辑：

文档提到使用 AVAsset 作为字幕，但有人真的有例子吗？我只能找到有关添加字符串作为字幕而不是加载远程 VTT 的示例。

在我的项目中，我使用 swiper.js 作为幻灯片，每张幻灯片都包含图像或带有 webvtt 字幕/字幕的 html5 视频。在调试时，我们注意到 webkit 浏览器上的字幕位置错误（太低，截屏）。经过多次调试，结果发现父 div（swiper-wrapper）上的这个 css3 规则使 vtt 位置错误：

当您将视频放在第一张幻灯片中时，一切顺利，因为还没有 css 翻译。

这似乎是一个核心 webkit 问题：在父级上使用 css 翻译时默认 webvtt 定位中断。

我发现的解决方法是在 vtt 本身中为每个字幕元素添加一个行定位，如下所示：

任何没有“line: 90%”部分的句子都会部分呈现在屏幕外。似乎此设置强制 webvtt 解析器/渲染器将自身设置为正确的位置。

问题：有没有人遇到过这个问题，还有其他（更简单的）解决这个错误的方法吗？将“行：”部分添加到所有字幕将是一项艰巨的工作..除非有一个好的编辑器可以批量完成这些工作。

问题 2：由于这似乎是一个 webkit vtt 解析器错误，任何人都知道在哪里最好地报告这个？

在此处进行测试设置：http: //orgonemedia.nl/webvtt-bug/