的 src 必须为绝对或相对路径，因规范不支持 blob url，浏览器会静默忽略；vtt 文件需严格遵循格式（如 webvtt 开头、空行、毫秒三位等），编码须 utf-8 无 bom；多语言切换依赖 js 动态控制 mode，且 safari 等浏览器有特定限制。
track 标签加字幕，为什么 src 必须是绝对或相对路径，不能用 blob URL？
因为 <track></track> 的 src 属性不支持 Blob URL（如 blob:http://.../xxx），浏览器会静默忽略——不会报错，但字幕永远不显示。这是规范限制，不是兼容性问题。
- 必须用真实可访问的 URL，比如
./zh.vtt、/sub/en.vtt或完整域名路径 - 开发时若用本地文件协议（
file://），多数浏览器会因 CORS 拒绝加载.vtt，务必起一个本地服务（如python3 -m http.server） - 如果字幕内容动态生成，得先通过
fetch获取文本，再写入临时<track kind="subtitles"></track>并调用track.mode = "showing"，但依然不能把 blob 赋给src
vtt 文件格式写错一个字符，字幕就全灭——常见语法雷区
.vtt 看似简单，但开头必须有 WEBVTT 标识，且后面要空一行；时间戳格式严格为 HH:MM:SS.mmm --> HH:MM:SS.mmm，毫秒必须三位，冒号和箭头前后要有空格。
- 错误示例：
00:01:02.5 --> 00:01:04.8（毫秒少一位）→ 整个 cue 被跳过 - 错误示例：
WEBVTT\nX-TIMESTAMP-MAP=...（没空行）→ 浏览器认为不是合法 VTT，不解析 - 中文需确保文件编码为 UTF-8 无 BOM，否则 Firefox 可能显示乱码或空白
- 不要在 vtt 里写 HTML 标签，
<b></b>等会被原样输出，不是渲染——如需样式，用 CSS 控制::cue
多语言切换：用 JavaScript 动态改 track 的 srclang 和 mode，别只靠 HTML 写死
HTML 中写多个 <track></track> 是基础，但用户切换语言必须靠 JS 控制 mode，否则只有第一个 default 会生效，其余始终是 disabled。
- 先给每个
<track></track>设唯一id和正确srclang（如zh、en、ja），default只加在初始语言上 - 切换时，遍历所有
track元素，把目标设为track.mode = "showing"，其余设为"disabled" - 注意：修改
mode后，浏览器不会自动滚动到当前时间点的字幕，需监听timeupdate手动触发匹配逻辑（如需精确同步）
Chrome 和 Safari 对 track 的默认行为差异，影响用户体验
Chrome 默认允许用户在右键菜单里开启/关闭字幕，Safari 则完全隐藏该菜单项——除非你显式设置 track.kind = "subtitles" 且至少有一个 default，否则 Safari 根本不暴露字幕开关。
- Safari 要求
<track kind="subtitles" default></track>存在，才会在视频控件里显示「字幕」按钮（右下角三个点菜单） - Firefox 对
::cue支持最全，Chrome 某些版本不支持font-size在::cue里生效，建议用line-height+padding替代 - 移动端 iOS Safari 不支持
track的load事件，监听onload属性无效，得靠轮询track.readyState判断是否就绪
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
