必须紧接在所有之后、之前，且WebVTT文件需满足首行WEBVTT、UTF-8无BOM、严格时间戳格式、正确Content-Type四项条件，srclang/label/kind属性缺一不可，JS控制前须等待track.readyState === 2。
video里
浏览器只在<video></video>开始标签之后、结束标签之前，并且**紧接在所有<source></source>之后**的位置识别<track></track>。放错位置，它根本不会进video.textTracks列表。
常见错误包括：
-
<track></track>写在<source></source>前面（最常犯） -
<track></track>被包在<div>或<code><span></span>里 -
<track></track>写在外面，哪怕只多一个换行符 - 多个
<track></track>之间插了<!-- 注释 -->或空<span></span> - 首行必须是
WEBVTT（全大写，无空格，无BOM） - 文件编码为
UTF-8 无 BOM（VS Code右下角点编码 → “Save with Encoding” → 选UTF-8） - 时间戳格式严格为
00:00:01.234 --> 00:00:04.567，不能有SRT序号行、不能有空行分隔 - 服务器返回
Content-Type: text/vtt（Nginx/Apache需手动配置MIME类型；本地file://协议下必然失败，必须起服务如python3 -m http.server） -
kind必须是"subtitles"、"captions"或"descriptions"之一；写成"subtitle"或留空，轨道直接被忽略 -
srclang是JS切换轨道时的唯一定位依据，推荐用BCP 47标准码，如"zh"、"en-US"；别用"ch"或"cn" -
label不只是UI显示文字，缺失会导致下拉菜单里只显示“字幕”两个字，用户无法区分中/英/日等多语种轨道 - 监听
video.textTracks[i].onload事件 - 或轮询检查
track.readyState === TextTrack.LOADED（即值为2） - 启用某条轨道时，记得把同
kind的其他轨道设为"disabled"，否则可能多轨叠加显示 - 移动端Safari默认隐藏原生字幕按钮，且不响应
default，必须自己做UI + JS控制mode
修复方法：把<track></track>直接挪到<source></source>闭合后、前，中间不加任何其他节点或空白。
WebVTT文件四个硬性条件缺一不可
Chrome/Firefox/Safari对.vtt文件极其严格——漏一条就静默失败：不报错、不加载、字幕空白。必须同时满足：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
srclang、label、kind属性一个都不能少
这三个属性不是“可选增强”，而是浏览器解析轨道的必需字段：
多个<track></track>中只能有一个带default属性，否则全部失效。
JS控制字幕前必须等track.readyState === 2
直接设track.mode = "showing"大概率无效——因为.vtt文件还没加载完，浏览器不会等你。
正确做法：
最容易被忽略的是：本地开发时用file://协议打开HTML，所有.vtt加载都会失败；还有就是服务器没配text/vtt MIME类型，Safari会直接拒收，连控制台都不报错。
