I want to use videojs (ver 8.10.0) and offer viewers a way to select a chapter. The way I understand the official documentation is that it should be enough to simply include a track-element which links to a VTT-file within the video-element, so that the Chapters-Button would appear.(1. source for the information about the track-element; 2. source for the Chapters-Button see Annotation to the chapters button from the default component tree of videojs )
So far I could not manage to make the Chapters-Button appear just by including the track-element.Is this even the right way or would I have to add the Chapters-Button within a js-sript manually?
The HTML-file:
<head>
<title>Test</title>
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster=""
data-setup="{}"
>
<source src="example.mp4" type="video/mp4" />
<track kind="chapters" src="kapitelNeu.vtt" srclang="de" label="Kapitel" default>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a>
</p>
</video>
<script src="https://vjs.zencdn.net/8.10.0/video.js"></script>
</body>
</html>
The VTT-file
WEBVTT
Kapitel 1
00:00:00.000 --> 00:00:04.000
Test 1
Kapitel 2
00:00:05.000 --> 00:00:09.000
Test 2
@misterben: You were totally right, thanks a lot 😊.
Dev tools showed that it was a CORS problem, so that the vtt-file (locally stored) could not be used. Under the given conditions I decided to put the WEBVTT-code directly in the src-attribute of the track-element and this way it works. I know, thats not much of a beautiful solution, but - at least for the moment - thats fine with me.