如何添加延迟或偏移以在 html5 原生视频播放器中同步 webvtt 字幕？答案

【问题标题】：How to add delay or offset to sync webvtt subtitles in html5 native video player?如何添加延迟或偏移以在 html5 原生视频播放器中同步 webvtt 字幕？
【发布时间】：2018-03-27 03:47:56
【问题描述】：

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

我找到了这个库 (https://github.com/florinn/vtt-shift)，但它重写了磁盘上的 webvtt 文件。我希望通过客户端方式与视频重新同步。

<video>
    <source class="videosource" src="{{media}}?play=true" type="video/mp4"/>
    <track kind="subtitles" label="Default" src="{{subtitle}}" default>
</video>

【问题讨论】：

您可以使用 textTrack API 或 cueRegions 但不值得这么麻烦。您应该使用Subtitle Edit 对其进行编辑如果一个简单的 VTT 文件已关闭，则不能 100% 确定您会在运行中成功地重新同步它。正确格式化和同步的 VTT 是 100% 可靠的

标签： javascript node.js html video-player webvtt

【解决方案1】：

最后我做了一个库来实时更改字幕位置、样式和偏移量。

https://www.npmjs.com/package/vtt-live-edit

【讨论】：