必须用 标签嵌入字幕，且需设 kind="subtitles"、srclang 和 src 指向 utf-8 编码的 webvtt（.vtt）文件，首行为 webvtt，时间戳用点分隔毫秒，再通过 default 属性或 js 设置 mode = "showing" 启用。
video 标签里加字幕要用 <track></track>，不是 src 属性直接写 srt 文件
很多人误以为给 <video></video> 加个 src 指向 .srt 就能出字幕，其实不行。<track></track> 是唯一被浏览器原生支持的字幕嵌入方式，且必须作为 <video></video> 的子元素存在，不能放外面，也不能用 JS 动态插入后指望自动生效（除非手动调用 addTextTrack()）。
常见错误现象：字幕文件路径正确、格式标准，但页面上完全不显示——大概率是漏了 <track></track> 标签，或没设 kind="subtitles" 和 srclang。
-
<track></track>必须放在<video></video>开始标签和之间，且在<source></source>之后 -
kind值必须是"subtitles"（其他如"captions"语义不同，会影响默认启用行为） -
srclang必须是合法 BCP 47 语言码，比如"zh"、"en"、"ja"，不能写"chinese"或空字符串 -
label是用户在播放器字幕菜单里看到的名称，建议与srclang一致或明确可读，比如label="中文"
字幕文件得是 WebVTT 格式，.srt 要转成 .vtt
Chrome、Firefox、Safari 都只原生解析 WebVTT（.vtt），直接扔 .srt 进 <track src="xxx.srt"></track> 会静默失败——控制台通常不报错，但字幕就是不出来。
转换很简单：把 .srt 头部加上 WEBVTT，把时间戳里的逗号改成点（00:01:23,456 → 00:01:23.456），其余格式基本兼容。也可以用在线工具或命令行工具 ffmpeg -i input.srt output.vtt。
- WebVTT 文件第一行必须是
WEBVTT，且后面要空一行 - 时间戳格式为
HH:MM:SS.mmm，毫秒部分必须三位，不足补零 - 确保文件编码是 UTF-8，BOM 会导致某些浏览器解析失败
- 路径必须可被浏览器直接 fetch 到，跨域时需服务端配
Access-Control-Allow-Origin
字幕默认不启用，得靠 user agent 或 JS 控制
即使 <track></track> 写对了、文件也加载成功，字幕也不会自动显示——浏览器按规范默认禁用所有字幕轨道，除非用户手动在播放器 UI 里勾选，或代码显式设置 default 属性。
加 default 属性是最简单方案，但注意：同一 <video></video> 中只能有一个 <track default></track>；且如果用户之前手动关闭过字幕，default 可能被忽略（取决于浏览器实现）。
- 想强制启用某条轨道，可用 JS：
video.textTracks[0].mode = "showing" - 监听
textTracks变化时，别只看length，要等readyState === 2（LOADED）才安全操作 - 移动端 Safari 对
default支持不稳定，有时需配合 JS 触发一次mode设置
调试时重点看 network 和 textTracks 列表
字幕不显示，别急着改 HTML，先打开 DevTools 看两处：
- Network 面板过滤
vtt，确认字幕文件返回 200 且响应体开头是WEBVTT - Console 里执行
document.querySelector("video").textTracks，检查列表长度、每项的kind、language、mode和readyState - 如果
mode是"disabled"，说明没触发启用逻辑；如果是"hidden"，说明已加载但未显示；"showing"才是正常状态 - 注意：某些广告拦截插件会屏蔽带
track关键字的请求，临时禁用插件测试
WebVTT 解析失败时，readyState 会卡在 0（NOT_LOADED）或 1（LOADING），这时候看 response body 最直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
