为视频添加字幕需确保四个环节全部到位：字幕文件合规（WEBVTT首行、时间格式00:00:01.234 --> 00:00:04.567、UTF-8无BOM）、HTML结构正确（track为video直接子元素且位于source之后）、四个属性齐全（kind、src、srclang、label）、理解浏览器行为（如跨域、controls要求等），缺一不可。
video 标签里怎么加字幕文件
HTML 本身不直接“添加”字幕，而是通过 标签挂载外部 WebVTT 字幕文件，由浏览器自动解析渲染。关键不是写对 ，而是配对好 的属性和字幕格式。
-
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 属性即可，但注意：同一 中只能有一个 带该属性，否则全部失效。
- 正确写法：
- 如果同时设了多个
default，浏览器会忽略所有default，字幕保持关闭状态 -
default不影响其他语言轨道的可用性，用户仍可在右键菜单手动切换
移动端和旧浏览器兼容性要注意什么
iOS Safari 从 10.3 起支持 ，但 Android WebView 表现不稳定，尤其在 Chrome 自定义 Tab 或某些国产浏览器中， 可能被完全忽略。
- 不要依赖
实现核心信息传达；重要文本需同步出现在页面其他位置 - 测试时务必真机验证，模拟器常误报支持
- 没有原生支持时，可降级用 JavaScript + 手动同步字幕，监听
timeupdate事件匹配时间轴字幕路径、编码、时间戳格式、
default唯一性这四点，任何一个出错都会让字幕“消失得毫无提示”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
