根本原因是字幕文件编码与浏览器解析声明不一致；必须确保字幕内容、保存格式、http响应头三者统一为utf-8（无bom），且track标签不可用charset属性。
HTML5 中外挂字幕（如 .vtt WebVTT 文件）出现中文乱码，根本原因不是 <video></video> 标签本身的问题，而是字幕文件的实际编码格式与浏览器解析时所依据的编码声明不一致。要真正防乱码，必须确保“字幕文件内容”“文件保存格式”“HTTP 响应头”三者统一为 UTF-8（推荐无 BOM），缺一不可。
确认字幕文件本身是 UTF-8 编码（关键第一步）
很多编辑器（如 Windows 记事本、旧版 Sublime Text）默认用 ANSI（即 GBK）保存 `.vtt` 文件，即使你写了 <track kind="subtitles"></track>，浏览器也会按 UTF-8 解码——结果就是中文全变“”或“锟斤拷”。
正确做法：
- 用 VS Code / Notepad++ / Sublime Text 打开你的
zh.vtt文件； - 查看右下角状态栏显示的当前编码（如显示 “GBK” 或 “ANSI”，说明不对）；
- 在菜单中选择「文件 → 另存为」→ 编码选 UTF-8（无 BOM） → 覆盖保存；
-
切勿选“UTF-8 with BOM”：WebVTT 规范明确要求字幕文件不能含 BOM，否则 Chrome/Firefox 会直接拒绝加载并报错
Failed to load resource: net::ERR_INVALID_RESPONSE。
确保服务器返回正确的 Content-Type 和 charset
浏览器加载 `.vtt` 文件时，优先信任 HTTP 响应头里的 Content-Type，而不是文件扩展名或内容。如果服务器返回 text/plain 或没带 charset=utf-8，部分浏览器可能回退到系统默认编码（如 Windows 的 GBK）。
配置建议：
-
Apache：在站点根目录或字幕所在目录添加
.htaccess：AddType text/vtt .vttAddCharset utf-8 .vtt -
Nginx：在
server或location块中加入：types { text/vtt vtt; }add_header Content-Type "text/vtt; charset=utf-8"; -
本地开发（如 Python http.server）：默认不支持自定义响应头，建议换用
live-server或http-server -c-1（禁用缓存便于调试）； - 部署后务必用 Chrome 开发者工具 → Network → 找到
zh.vtt→ 查看 Response Headers 中是否含Content-Type: text/vtt; charset=utf-8。
HTML 中 track 标签无需额外写 charset 属性
HTML5 的 <track></track> 标签**不支持** charset 属性（该属性早已被废弃）。不要写：<track kind="subtitles" src="zh.vtt" charset="utf-8"></track>（无效且可能报错）。
正确写法只需保证 src 可访问、srclang 正确、kind 明确：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="中文" srclang="zh" src="zh.vtt" default></track></source></video>
浏览器会自动按响应头或文件 BOM（但 VTT 禁用 BOM）+ 内容规则解析编码，唯一可控的就是把文件存成 UTF-8（无 BOM）+ 服务端配对返回 charset=utf-8。
快速验证与排错步骤
发现字幕乱码时，按顺序检查：
- 用文本编辑器重新打开 `.vtt` 文件 → 确认右下角显示 “UTF-8” 且内容中文正常；
- 在浏览器 Network 面板中刷新页面 → 找到 `.vtt` 请求 → 点开 Headers → 看 Response Headers 里
Content-Type是否为text/vtt; charset=utf-8； - 打开 `.vtt` 文件原始 URL（如
https://yoursite.com/zh.vtt）单独访问 → 确认浏览器地址栏能正常显示中文，而非一堆方块或问号； - 检查 `.vtt` 文件开头是否有非法字符（如空格、BOM、UTF-8 不可见控制符）——可用 VS Code 的「显示所有字符」功能（Ctrl+Shift+P → Toggle Render Whitespace）排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
