5

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

transform: translate3d(-1024px, 0px, 0px)

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

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

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

WEBVTT

00:00:02.160 --> 00:00:06.440 line:90%
hello world

00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles

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

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

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

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

4

1 回答 1

-1

我目前也在调试一些英文字幕和其他语言的 WebVTT 文件。我遇到了类似的问题，虽然我不能说到底是什么原因造成的。我将尝试您在此处建议的行：90% 修复。

回答您的问题 1：关于将其添加到所有字幕的工作，您会很高兴知道使用正确的工具实际上很容易。我使用崇高的文本编辑器。我这样做的方法是使用“查找所有”来查找所有出现的-->，然后同时编辑每一行，使用箭头键导航到该行的正确位置（因为每个字幕都输出- time 是相同的字符数，12)，然后输入 line:90%

更新：所以我实施了你的建议，使用我概述的方法，它成功地重新定位了我的标题。

更多详细信息：在 iPad 上观看时，我只遇到了视频底部一半的字幕问题。奇怪的是，在 iPhone 上查看相同的页面时，它们的位置正确，没有任何变化。不过，90% 的变化仍然对其进行了调整。

有趣的是，在 Chrome 上查看页面时，line:90% 代码对调整标题位置没有任何作用。

我无法在 Safari 桌面上显示太多内容。我认为我的文件格式有一些无效的地方，但如果我能找到它，我会很生气。

通过我的视频托管服务的字幕编辑器（我正在使用 JWPlayer）编辑字幕时，时间码显示为无效：

显示带有无效警告的字幕编辑器的图像

于 2016-04-06T23:34:20.280 回答