How to make the ChaptersButton appear in Videojs-Player

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

Solution

@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.