标签不支持crossorigin属性，浏览器会忽略该设置；字幕跨域加载需服务端为.vtt文件单独配置CORS，或改用fetch+TextTrack API主动加载并注入。
video 的
直接给 <track></track> 加 crossorigin 无效，浏览器会完全忽略——HTML 规范里明确没把这个属性列入 <track></track> 的合法属性列表。哪怕你写了 <track kind="subtitles" src="https://cdn.example.com/en.vtt" crossorigin="anonymous"></track>，Network 面板里也看不到 Origin 请求头，服务端更不会收到预检或带凭据的请求。
常见误操作包括：用 Webpack/Vite 构建时试图通过插件给 <track></track> 注入 crossorigin；或在 JS 动态创建 track 元素后手动设 track.crossOrigin = 'anonymous'——这些都无意义，因为该 DOM 接口根本不存在这个属性。
字幕加载失败的本质是 fetch 行为，不是 video 自身加载
<track></track> 的 src 是由浏览器内部用类似 fetch() 的机制拉取的，但它走的是独立资源加载通道，不继承 <video></video> 的 crossorigin 设置。所以问题不在标签写法，而在两点：
- 服务端是否对
.vtt（或.srt）响应返回了Access-Control-Allow-Origin - 前端是否在 JS 中显式用
fetch()加载并注入，从而可控地传credentials、捕获错误、重试或 fallback
如果你的字幕托管在 CDN 或对象存储（如阿里云 OSS），必须单独为 .vtt 后缀配置 CORS 规则，不能只配视频文件的规则。OSS 控制台里要新增一条规则，允许来源填 https://your-site.com，允许方法勾选 GET，暴露头可留空。
立即学习“前端免费学习笔记（深入）”；
可靠方案：用 fetch + TextTrack API 替代原生 track 标签
绕过 <track></track> 的不可控加载，改用 JS 主动获取字幕内容，再通过标准 Web API 注入到 <video></video> 中。这样能统一处理错误、支持鉴权、兼容 SRI、便于埋点。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操步骤：
- 先确保
<video></video>已设crossorigin="anonymous"（否则后续 canvas 操作或captureStream()仍可能被污染） - 用
fetch(url, { credentials: 'same-origin' })拉字幕，可加try/catch和重试逻辑 - 解析成功后，调
video.addTextTrack('subtitles', 'English', 'en')创建 track，再遍历vtt内容用track.addCue()注入 - 若需支持多语言切换，把字幕内容缓存为对象，避免重复 fetch
示例关键片段：
const track = video.addTextTrack('subtitles', 'English', 'en');
fetch('https://cdn.example.com/en.vtt')
.then(r => r.text())
.then(vttText => {
// 这里需用 vtt.js 或简易正则解析 cue，略
// 解析后：track.addCue(new VTTCue(...));
})
.catch(err => console.error('字幕加载失败', err));
CDN 字幕带签名或 Cookie 鉴权时怎么办
当字幕 URL 含临时 token（如 en.vtt?t=1730110860&s=abc123）或依赖登录态 Cookie 时，<track src="...&s=abc123"></track> 仍会失败——因为浏览器内部加载不发 Cookie，也不保证 query 参数透传（尤其经多层 CDN 缓存时）。
此时必须用 JS fetch() 并显式控制凭证：
- 若服务端支持
Access-Control-Allow-Credentials: true，fetch 里传{ credentials: 'include' } - 若服务端只认 token，fetch 里加
headers: { 'Authorization': 'Bearer xxx' }，同时服务端 CORS 规则中Access-Control-Allow-Headers必须包含Authorization - 注意：一旦用了
credentials: 'include'，服务端Access-Control-Allow-Origin就不能是*，必须精确匹配当前 origin
动态字幕加载的复杂点不在语法，而在于你得自己维护 track 的生命周期：比如视频 seek 时 cue 是否自动激活、语言切换时旧 track 是否 track.mode = 'disabled'、销毁 video 时是否清理所有 cue。这些原生 <track></track> 标签都帮你做了，自己实现就得补全。
