如何在Video.js 8.10.0播放器中显示ChaptersButton

问题描述 #

我使用Video.js 8.10.0版本，希望为观看者提供章节选择功能。按照官方文档说明，只需在video元素内添加关联VTT章节文件的track元素，ChaptersButton就会自动显示，但添加后按钮并未出现。想确认这种实现方法是否正确，还是需要通过JS脚本手动添加ChaptersButton？

相关代码 #

HTML文件 #

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

原VTT文件 #

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

问题原因与解决办法 #

你采用的实现思路是正确的，不需要手动通过JS添加ChaptersButton，按钮不显示的核心问题是你的VTT文件格式不符合Video.js的要求：

1. 修正VTT章节顺序 #

Video.js要求章节VTT的结构必须是「时间戳行在前，章节标题行在后」，而你现在把章节标题写在了时间戳前面，顺序完全颠倒了。

修正后的VTT文件示例：

WEBVTT

00:00:00.000 --> 00:00:04.000
Kapitel 1: Test 1

00:00:05.000 --> 00:00:09.000
Kapitel 2: Test 2

也可以使用带章节ID的格式（ID为可选，结构更清晰）：

WEBVTT

1
00:00:00.000 --> 00:00:04.000
Kapitel 1

2
00:00:05.000 --> 00:00:09.000
Kapitel 2

2. 额外检查项 #

• 确认VTT文件路径正确：在浏览器开发者工具的「网络」面板中查看kapitelNeu.vtt是否成功加载（无404错误）
• 确保track元素的kind="chapters"属性设置正确，这是Video.js识别章节轨道的关键标记

修正后刷新页面，ChaptersButton就会自动出现在播放器控制栏中。

内容的提问来源于stack exchange，提问作者Segafredo