如何将HTML视频字幕track标签与vtt文件有效结合使用？

本文共计999个文字，预计阅读时间需要4分钟。

浏览器只认可 标签。

正确结构示例：

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

• kind="subtitles" 是最常用值；用 captions 时会强制显示（含音效描述），descriptions 则需辅助技术支持
• srclang 必须是合法 BCP 47 语言标签（如 zh、zh-Hans、en-US），错写成 ch 或 cn 会导致字幕不自动匹配
• default 属性只允许一个 track 使用，否则行为未定义；用户手动切换后该属性不再生效

vtt 文件路径 404 是最常见的失败原因

浏览器对 <track src="..."> 的请求走的是普通 HTTP 请求，和 CSS/JS 一样受同源策略限制，也一样会因路径错误返回 404。开发者常误以为“文件放同一目录就行”，但实际路径是相对于当前 HTML 页面 URL 的。