WebVTT章节轨道必须首行为“WEBVTT”，次行空行后写“Kind: chapters”，时间戳格式为“00:00:00.000 --> 00:01:30.000”，且需严格递增；video标签中track元素须含default和type="text/vtt"属性。
chapters字幕轨道必须用WebVTT且第一行写kind: chapters
浏览器只认kind="chapters"的<track>为章节导航，但光设属性没用——文件内容格式错了，视频进度条上就不会出现章节标记。WebVTT文件开头必须带WEBVTT声明，且**第一行之后紧跟着Kind: chapters（注意大小写和冒号后空格）**，否则Chrome/Firefox直接忽略整条轨道。
常见错误：kind: chapters写在第二行之后、漏了WEBVTT、用了kind: subtitles却想当章节用、VTT里时间戳格式错（比如用00:01:23.456但漏掉毫秒位或用了逗号分隔）。
-
WEBVTT必须独占第一行，后面空一行再写Kind: chapters - 每个章节段用
00:00:00.000 --> 00:01:30.000格式，起止时间必须严格递增、不能重叠 - 时间戳后换行写章节标题，标题里别用
<或>，否则被当成HTML标签解析为空
video标签里track元素要加default且type设对
<track>没加default属性，章节就不会自动激活；没设srclang或label，部分浏览器可能不显示章节名。同时，type属性必须是"text/vtt"，哪怕文件后缀是.txt也得显式声明。
典型配置长这样：
立即学习“前端免费学习笔记（深入）”；
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="chapters" src="chapters.vtt" srclang="zh" label="章节" default type="text/vtt"> </video>
-
default是硬性要求，没它章节导航不出现在进度条下方 -
srclang值不影响功能，但设成"und"（未指定语言）可能让某些播放器拒绝加载 -
label值会显示在右键菜单的“字幕”列表里，留空则显示文件名
章节标题过长或含特殊字符会导致截断或乱码
浏览器对<track kind="chapters">的标题渲染很保守：超出约30字符会被省略号截断；含中文引号、破折号、emoji时，部分旧版Edge或Safari可能显示方块或空白。最稳的做法是纯ASCII字母+数字+空格+常见标点（. , : ; -）。
- 标题里避免
“”‘’…—，换成英文直角引号" "和短横线- - 测试时用
chrome://media-internals看“Text Tracks”是否列出该轨道且状态为loaded - 如果进度条上始终没章节标记，先检查控制台有没有
Failed to load resource或Invalid VTT file报错
章节跳转后currentTime不准？那是VTT时间戳精度问题
点击章节跳转，实际播放位置比VTT里写的起始时间慢几十毫秒，尤其在H.264硬解设备上常见。这不是代码错，而是浏览器把章节时间对齐到最近的关键帧（I帧），而VTT写的是逻辑时间点。解决思路只有两个：要么在VTT里把起始时间提前50–100ms，要么接受这个偏差。
- 别指望
currentTime精确到毫秒级——媒体时间轴本身就有抖动 - 用
video.addEventListener('seeked', ...)捕获跳转完成事件，而不是监听timeupdate - 如果章节间隔很短（如
真正卡住的地方往往是VTT文件头那行Kind: chapters少了个空格，或者服务器没配Content-Type: text/vtt响应头——这两处一错，整个章节功能就静默失效。
