在我的项目中，我使用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
没有＆＃34;行的任何句子：90％＆＃34;部分部分在屏幕外呈现。看起来这个设置强制webvtt解析器/渲染器将自己设置到正确的位置。
问题：是否有人遇到此问题，是否还有其他（更简单）的解决方法？添加＆＃34;行：＆＃34;部分到所有字幕将是一个地狱的工作......除非有一个好的编辑器可以批量做这些东西。
问题2：由于这似乎是一个webkit vtt解析器错误，任何人都知道在哪里最好地报告这个？
答案 0 :(得分：0)
我目前正在为英文字幕和其他语言调试一些WebVTT文件。我遇到了类似的问题，虽然我不能说出究竟是什么造成的。我将尝试这条线：90％修复了你在这里的建议。
回答您的问题1：关于将其添加到所有字幕的工作，您会很高兴知道使用正确的工具实际上很容易。我使用Sublime Text Editor。我这样做的方法是使用＆＃34;查找全部＆＃34;找到所有出现的 - ＆gt;，然后同时编辑这些行中的每一行，使用箭头键导航到该行的正确位置（因为每个字幕输出时间是相同的字符数，12），然后键入：90％
更新： 所以我使用我概述的方法实现了你的建议，并成功地重新定位了我的标题。
更多详细信息：在iPad上观看时，我只遇到了字幕底部偏离视频一半的问题。奇怪的是，在iPhone上查看相同的页面，它们被正确定位而没有任何变化。 90％的变化仍然调整了它。
有趣的是：在Chrome上查看网页时，90％的代码无法调整字幕位置。
我无法在Safari桌面上显示任何内容。我认为我的文件格式有些无效，但如果我能找到它，我就知道了。
通过我的视频托管服务的字幕编辑器（我使用JWPlayer）编辑字幕时，时间码显示为无效：
