Search code examples
javascriptnode.jshtmlvideo-playerwebvtt

How to add delay or offset to sync webvtt subtitles in html5 native video player?

My video and webvtt subtitles are not synced. Is there a JavaScript way to manage webvtt subtitle synchronization/delay/offset in html5 native player?

I found this lib (https://github.com/florinn/vtt-shift) but it rewrite the webvtt file on disk. I'd prefer a client side way to resync with the video.

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

Solution

  • Finally I made a lib to live change subtitles position, style and offset.

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