track元素的kind属性必须显式设为subtitles才能被浏览器识别为可切换字幕，且需同时设置src、srclang、label；顺序须在video内source之后；VTT文件须符合语法并UTF-8无BOM；default属性不可靠，应通过JS设置mode="showing"。
track 元素的 kind 属性必须设为 subtitles 才能被浏览器识别为可切换字幕
很多开发者把 <track> 写成 kind="caption" 或直接省略，结果字幕在 Chrome/Firefox 里根本不显示切换菜单。浏览器只对 kind="subtitles" 做语言切换支持（kind="captions" 主要用于听力障碍场景，行为不一致；kind="descriptions" 等则完全不进字幕开关列表）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
kind必须显式写成subtitles，不能依赖默认值 -
srclang必须是合法 BCP 47 语言标签，比如zh、zh-Hans、en、ja，写成chinese或english会失效 -
label建议用自然语言（如label="中文（简体）"），这是用户在右键菜单里实际看到的文字
多个 track 标签必须放在 video 标签内部、且在 source 标签之后
把 <track> 放到 <video> 外面，或插在 <source> 前面，浏览器会忽略——不是报错，而是静默丢弃。常见错误现象是：DOM 里能看到 track 元素，但右键“字幕”菜单空空如也。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 顺序必须是：
<video>→<source>（可多个）→<track>（可多个）→</video> - 每个
<track>都要带src、kind、srclang、label四个属性，缺一不可 - VTT 文件路径必须可跨域访问（如果 video 是 CDN 资源，track 也得同域或配好 CORS）
Chrome 和 Safari 对 default 属性的支持逻辑不同
default 属性本意是“默认启用”，但 Chrome 只在用户没手动切换过字幕时生效；Safari 则更严格——如果多个 track 都写了 default，它可能一个都不启用。更麻烦的是，一旦用户点过一次字幕开关，default 就彻底失效，下次加载也不会恢复。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最多只给一个
<track>加default，且优先给用户最可能需要的语言（比如页面 lang 是 zh，就给srclang="zh"的 track 加） - 不要依赖
default实现“首次加载自动显示”，需要用 JS 检查video.textTracks后手动track.mode = "showing" - 注意：Safari 16.4+ 开始支持
textTracks[0].mode = "showing"，但 iOS 旧版 Safari 仍可能忽略
VTT 文件格式出错会导致整条 track 被静默禁用
哪怕只是 VTT 文件第一行少了 WEBVTT，或时间戳格式错一位（比如写成 00:00:01.500 --> 00:00:04.000 却漏了毫秒位），Chrome 就直接把这条 track 的 mode 设为 "disabled"，且不报任何控制台警告。用户看到的就是“字幕菜单里有选项，点了却没反应”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用在线工具（如 quuz.org/webvtt）校验 VTT 语法，别靠肉眼检查
- 确保文件编码是 UTF-8 无 BOM，BOM 会导致 Chrome 解析失败
- 开发时打开 DevTools → Application → Frames → 选中 video 元素 → 查看
textTracks数组，确认每条 track 的mode和readyState值（readyState === 2才算加载成功）
真正卡住人的地方往往不是语法不会写，而是浏览器对缺失属性、格式偏差、加载时序的容错极低——它不报错，只沉默放弃。多看一眼 textTracks 的状态，比反复改 HTML 有效得多。
