在我的项目中，我使用 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 解析器/渲染器将自身设置到正确的位置。
问题:有人遇到过这个问题吗？对于这个错误还有其他(更简单的)解决方法吗？将“line:”部分添加到所有字幕中将是一项艰巨的工作..除非有一个好的编辑器可以批量完成这些工作。
问题 2:由于这似乎是一个 webkit vtt 解析器错误，有人知道在哪里可以最好地报告此问题吗？
最佳答案
我目前正在调试一些英语字幕和其他语言的 WebVTT 文件。我也遇到了类似的问题，虽然我不能说到底是什么原因造成的。我将尝试您在此处建议的行:90% 修复。
回答您的问题 1:关于将其添加到所有字幕的工作，您会很高兴知道使用正确的工具实际上非常容易。我使用 Sublime Text 编辑器。我的方法是使用“查找全部”来查找所有出现的 -->，然后同时编辑每一行，使用箭头键导航到该行的正确位置(因为每个字幕都出- time 是相同的字符数，12)，然后输入 line:90%
更新: 因此，我使用我概述的方法实现了您的建议，并成功地重新定位了我的标题。
更多细节:我只是在 iPad 上观看时遇到了字幕位于视频底部一半的问题。奇怪的是，在 iPhone 上查看同一页面时，它们的位置正确，没有任何变化。不过，90% 的变化仍然对其进行了调整。
有趣的是，在 Chrome 上查看页面时，line:90% 代码不会调整标题位置。
我无法在 Safari 桌面上显示太多内容。我认为我的文件格式有一些无效的地方，但如果我能找到它，我就该死了。
通过我的视频托管服务的字幕编辑器(我使用的是 JWPlayer)编辑字幕时，时间码显示为无效:
关于webkit - 在父级( slider )上使用 css 翻译时 webvtt 位置错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35898037/