每个video必须独立声明track标签，不可外部复用或JS克隆；需显式设置srclang和label，相对路径要确保base URL一致；推荐JS批量注入并注意Safari兼容性、CORS及VTT格式规范。
多个 <video></video> 共享同一份 <track></track> 时，浏览器不自动复用
HTML 规范里，<track></track> 必须是 <video></video> 的直接子元素，且每个 <video></video> 都要独立声明自己的 <track></track>。所谓“复用”不是指 DOM 复用，而是指多个视频引用同一份字幕文件（如 subtitles.vtt），但需分别写一遍 <track></track> 标签。
常见错误是试图把 <track></track> 写在 <video></video> 外面，或用 JS 动态插入一次再 clone 到多个 video —— 这样会导致部分浏览器（尤其是 Safari）忽略字幕，或字幕加载失败后不重试。
- 每个
<video></video>必须包含独立的<track kind="subtitles"></track>，哪怕src完全相同 -
srclang和label属性必须显式设置，否则 Chrome/Firefox 可能不显示该字幕项 - 如果字幕文件路径是相对路径，确保所有
<video></video>所在 HTML 页面的 base URL 一致，否则src会解析出错
用 JavaScript 批量注入 <track></track> 更可靠
手写重复标签容易漏配属性、拼错路径，尤其当视频数量多或需动态增删时。推荐用脚本统一管理字幕配置，再为每个 <video></video> 插入对应 <track></track>。
示例：给页面中所有 class="with-subtitles" 的 <video></video> 添加英文和中文字幕
立即学习“前端免费学习笔记（深入）”；
const subtitleConfig = [
{ src: 'en.vtt', srclang: 'en', label: 'English' },
{ src: 'zh.vtt', srclang: 'zh', label: '中文' }
];
document.querySelectorAll('video.with-subtitles').forEach(video => {
subtitleConfig.forEach(({ src, srclang, label }) => {
const track = document.createElement('track');
track.kind = 'subtitles';
track.src = src;
track.srclang = srclang;
track.label = label;
track.default = srclang === 'zh'; // 默认启用中文
video.appendChild(track);
});
});
- 注意：必须在
<video></video>已插入 DOM 后执行，否则 Safari 不触发字幕加载 - 不要用
innerHTML +=拼接<track></track>，会清空已加载的视频元数据 - 若字幕文件带 CORS 头（如部署在 CDN），确保服务器返回
Access-Control-Allow-Origin: *，否则 Firefox 直接静默失败
用 MediaController 同步多个视频的字幕开关（可选进阶）
如果多个视频需同时播放、暂停、切换字幕语言，光靠复用字幕文件不够，还得同步控件状态。HTML5 原生支持 <media-controller></media-controller>（实验性）或手动绑定事件。
- 现代方案：用
MediaController实例统一控制多个<video></video>，但需各视频都设mediagroup属性且同名 - 字幕开关同步需监听一个视频的
textTracks[0].mode变化，再批量赋值给其他视频的对应 track - 注意：不同视频的
textTracks索引不一定对齐，建议用srclang查找目标 track，而非硬编码索引
容易被忽略的兼容性细节
字幕复用看似简单，但实际落地时最容易栽在边缘情况：
- Safari 对
<track></track>的default属性支持不稳定，有时需 JS 调用track.mode = 'showing'强制启用 - VTT 文件首行必须是
WEBVTT（严格大小写），且不能有 BOM，否则 Chrome 加载失败但无报错 - 如果视频是通过
srcObject（如 MediaStream）设置的，<track></track>无效，此时必须用 WebVTT API + Canvas 手动渲染字幕
