为视频添加字幕需确保四个环节全部到位：字幕文件合规（WEBVTT首行、时间格式00:00:01.234 --> 00:00:04.567、UTF-8无BOM）、HTML结构正确（track为video直接子元素且位于source之后）、四个属性齐全（kind、src、srclang、label）、理解浏览器行为（如跨域、controls要求等），缺一不可。
video 标签里怎么加字幕文件
HTML 本身不直接“添加”字幕，而是通过 <track></track> 标签挂载外部 WebVTT 字幕文件，由浏览器自动解析渲染。关键不是写对 <video></video>，而是配对好 <track></track> 的属性和字幕格式。
-
kind="subtitles"是必须的，不能写成"caption"（那是为听障设计的含音效描述的轨道） -
srclang必须是合法的 BCP 47 语言码，比如"zh"或"zh-CN"，写"ch"或空值会导致轨道被忽略 -
label是用户在右键菜单里看到的名字，建议用可读字符串，如"中文（简体）" - 字幕文件必须是 UTF-8 编码，且后缀为
.vtt；内容第一行必须是WEBVTT（大小写敏感，后面不能有空格或注释）
WebVTT 文件写错会怎样
常见错误不是视频不播放，而是字幕完全不出现——浏览器静默丢弃非法 .vtt。最常踩的坑是：
- 用记事本保存时默认 ANSI 编码，导致中文乱码 → 改用 VS Code / Sublime 等工具另存为 UTF-8（无 BOM）
- 时间戳格式不对，比如写成
00:00:01,500 --> 00:00:03,200（逗号应为英文句点）→ 正确是00:00:01.500 --> 00:00:03.200 - 漏掉空行分隔每个字幕块，或在
WEBVTT后加了空行 → 浏览器可能只加载第一个区块 - 路径写错：
src值是相对路径，需相对于 HTML 文件位置，不是相对于 JS 或 CSS
怎么让字幕默认开启
加 default 属性即可，但注意：同一 <video></video> 中只能有一个 <track></track> 带该属性，否则全部失效。
- 正确写法：
<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default></track> - 如果同时设了多个
default，浏览器会忽略所有default，字幕保持关闭状态 -
default不影响其他语言轨道的可用性，用户仍可在右键菜单手动切换
移动端和旧浏览器兼容性要注意什么
iOS Safari 从 10.3 起支持 <track></track>，但 Android WebView 表现不稳定，尤其在 Chrome 自定义 Tab 或某些国产浏览器中，<track></track> 可能被完全忽略。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
<track></track>实现核心信息传达；重要文本需同步出现在页面其他位置 - 测试时务必真机验证，模拟器常误报支持
- 没有原生支持时，可降级用 JavaScript +
<div> 手动同步字幕，监听 <code>timeupdate事件匹配时间轴 字幕路径、编码、时间戳格式、default唯一性这四点，任何一个出错都会让字幕“消失得毫无提示”。
