I have been searching the web for a few days now with no solution. I am aware that there used to be an issue with Video.js, but apparently it was fixed in 2014 with v4.7.0 and I'm running v4.12.3. I've checked everything and can't find any issues with my code. Subtitles work but Chapters don't show up at all.
My VTT: (chapters.vtt in the /public/ dir)
WEBVTT
Chapter 1
00:00:54.000 --> 00:02:46.000
What did you work on at your previous jobs?
Chapter 2
00:02:59.000 --> 00:04:25.000
When did you get started with programming?
Chapter 3
00:04:30.000 --> 00:05:35.000
What is prototypal inheritance?
Chapter 4
00:05:35.001 --> 00:09:48.000
Why is prototypal inheritance better than classical inheritance in JS?
I added the MIME type to Nginx and the file is loading properly.
My view:
<video id="video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="428"
data-setup='{ "playbackRates": [1, 1.35, 1.5] }'
poster="...path_here">
<source src="...path_here" type='video/mp4' />
<track kind="chapters" src="/chapters.vtt" srclang="en" label="Chapters" default="default">
</video>
<link href="//vjs.zencdn.net/4.12.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12.3/video.js"></script>
<script src="/js/plugins/video/videojs.ga.min.js"></script>
<script>
var interviewVideo = videojs('video', {}, function() {
this.ga(); // load the Analytics plugin
});
</script>
I've tried just default, no default, Chapters, chapters, no Chapter in the VTT file, no hours in the VTT file. Nothing happens at all, except when I change it to subtitles. Then everything works fine.
Thinking about opening an issue on github, but this wouldn't be the first time I've overlooked something stupid.
Thank you for your time and help.
It's an issue with the plugin: https://github.com/videojs/video.js/issues/2131
Use 4.11 if you need chapters.