track元素必须嵌套在video或audio内部，且紧随source之后；kind、srclang、label三属性缺一不可，src需CORS合规，vtt文件须UTF-8无BOM并符合WEBVTT语法规范。

track 元素必须嵌套在 video 或 audio 内部才生效

直接把 放在 或独立位置，浏览器完全忽略它——这不是 bug，是规范强制要求。它不是独立资源加载器，而是媒体元素的「附属轨道控制器」。

常见错误现象： 单独写在页面里，控制台没报错但字幕死活不显示。

• 必须作为 或 的子元素（不能是兄弟节点）
• 父媒体元素需有 controls 属性，否则即使加载成功也无法手动开启字幕
• 若用 JavaScript 动态添加 ，需确保插入到媒体元素内部且调用 load() 重载资源

src 路径必须可跨域访问，且响应头允许 CORS

浏览器对 的 src 执行严格 CORS 检查。哪怕本地文件双击打开（file:// 协议），也会因缺少响应头被静默拦截。

典型错误信息：Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin

• 开发阶段务必用本地服务器启动（如 python3 -m http.server、live-server 或 Vite）
• 如果字幕托管在 CDN 或第三方域名，服务端必须返回 Access-Control-Allow-Origin: *（或指定域名）
• vtt 文件本身不能有 BOM 头，否则 Safari 可能解析失败

kind、srclang、label 属性缺一不可，否则字幕菜单不出现

仅靠 src 不足以让字幕出现在播放器的字幕选择菜单里。浏览器依赖这三个属性协同识别轨道用途和语言。

错误写法： → 菜单里根本看不到该轨道

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• kind="subtitles" 是最常用值（其他还有 captions、descriptions 等，语义不同）
• srclang="zh" 必须是合法 BCP 47 语言标签（如 en、zh-Hans、ja），大小写敏感
• label="中文" 是用户看到的菜单名，建议用简短可读文字，不要留空或用路径名

正确示例：

<video controls><br><source src="movie.mp4"><br><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt"><br></track></source></video>

WebVTT 格式稍有语法错误，整个轨道就会静默失效

不同于 HTML 容错强，.vtt 文件只要时间戳格式错一位、漏一个空行、或用了中文标点，Chrome/Firefox 就会跳过加载，且不报任何错误。

容易踩的坑：00:00:01.234 --> 00:00:04.567 中用了全角冒号或破折号；文本块开头多了空格；最后一行没空行。

• 用在线验证工具检查：https://quuz.org/webvtt/（粘贴内容即可）
• 时间戳必须为 HH:MM:SS.mmm 格式，毫秒三位，不能少也不能多
• 每段字幕之间必须有空行，第一行必须是 WEBVTT（无 BOM，无空格）
• 避免在字幕文本中使用 以外的 HTML 标签（、
  均无效）

  真正麻烦的地方在于：所有问题都表现为「字幕不出现」，但控制台安静得像没这事——得逐项核对 DOM 结构、网络请求状态、vtt 语法、CORS 响应头，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！