商品视频能在网页播放，为什么外部字幕轨道却加载失败？

先确认字幕文件是否真正被请求成功

网页中的 video 元素负责视频播放，track 元素负责关联外部定时文本轨道。track 的 src 指向 WebVTT 文件。视频文件加载成功，并不能证明字幕文件也已经下载。

打开浏览器开发者工具的网络请求记录，分别检查媒体请求与字幕请求。确认字幕地址、最终响应状态及是否发生重定向。

如果字幕返回 404，应先核对文件路径和部署位置；如果返回 403，应检查资源访问权限或认证条件。这两类问题不能简单归为跨域限制。

还要确认字幕确实使用有效的 WebVTT 格式，并核对 track 的 kind、srclang 和 label 等信息。语言标签和显示名称有助于识别轨道，但不能修复文件无法访问的问题。

决策分支：请求未成功，先解决地址或权限；资源存在却被浏览器跨源策略阻止，再检查 CORS 配置。

理解为什么视频能播而字幕不能播

浏览器对媒体资源和外部文本轨道的获取方式并不完全相同。某些跨站视频可以在普通媒体加载模式下播放，但外部字幕仍受到同源要求约束。

MDN 说明，若 track 资源不是同源，需要在父级 video 或 audio 元素上设置 crossorigin。仅在 track 上添加同名属性，并不能替代父级媒体元素的配置。

crossorigin 为 anonymous 时，跨源请求不会携带跨站凭据。这不意味着任意 CDN 都会自动放行，服务器仍须提供符合请求条件的跨源访问响应。

决策分支：同源字幕优先排查文件与格式；跨源字幕则同时检查父级媒体元素的请求模式，以及字幕服务器实际返回的响应。

虚构练习（Illustrative exercise）：两种失败分开处理

以下是虚构输入，不是浏览器或服务器实测。输入 A 是同一网站上的商品演示视频与中文字幕。视频正常播放，但字幕请求返回 404。此时应核对 WebVTT 文件名、路径及部署结果，而不是首先修改 CORS。

输入 B 的视频可从外部 CDN 正常播放，字幕也位于 CDN，但浏览器阻止字幕轨道访问。先检查 video 的 crossorigin 设置，再检查字幕请求及 CDN 返回的跨源响应。

为输入 B 启用 CORS 请求模式时，还要重新检查视频本身。原先能够普通跨源播放的视频，如果服务器不支持新的请求模式，也可能开始加载失败。

决策分支：A 修复缺失文件或错误路径；B 协调父级媒体元素与服务器响应，并逐一验证视频和字幕。不要通过关闭浏览器安全机制解决交付问题。

交付验收要覆盖两个资源及最终跳转

完成配置后，重新加载页面，检查视频与字幕请求的状态、最终地址和重定向链。跨源策略需要结合实际请求和响应判断，不能仅凭页面上是否出现字幕推断全部原因。

检查 WebVTT 内容是否能够显示、语言轨道是否正确标识，以及字幕是否与视频对应。这里的重点是加载机制，不是字幕翻译质量或其他字幕格式的导入流程。

如果 CDN 存在访问控制，应采用正常的授权与跨源配置，不要把访问密钥直接放进公开 URL。

最终分别验收视频播放和字幕显示。两项都成功，才说明这次网页交付中的媒体与外部文本轨道均可正常使用；单独的视频播放成功并不足够。

虚构练习核对表：视频播放与外部字幕请求分离诊断

以下示例为虚构练习。另存核对表后填写自己的真实观察；不能将示例当作已完成的验收。

下载核对表（CSV）