HTML5原生字幕已稳定支持，依赖< track >元素与WebVTT文件；HTML4无视频及字幕定义，所谓“HTML字幕”实为JS模拟方案。
HTML5 <video> 原生字幕支持已稳定，HTML4 没有字幕能力
HTML4 根本不定义视频容器，更无字幕接口；所谓“HTML 字幕支持”实际是误称。真正可用的原生字幕方案只存在于 HTML5，依赖 <track> 元素配合 WebVTT 文件。浏览器从 Chrome 23、Firefox 24、Safari 6 起陆续支持，现在所有主流桌面/移动端浏览器（包括 Edge 和 iOS Safari）均已完整支持 <track kind="subtitles">。
<track> 的 srclang 和 label 必须匹配用户语言习惯
字幕开关能否被用户识别，不取决于技术是否生效，而取决于这两个属性是否合理设置：
-
srclang必须是合法 BCP 47 语言标签（如"zh"、"zh-Hans"、"en-US"），不能写"chinese"或"english"，否则部分浏览器（尤其是 Safari）会忽略该轨道 -
label是用户看到的菜单名，建议用本地化文字（如label="中文（简体）"），而非仅靠srclang自动推导 - 多个
<track>同时存在时，浏览器默认只启用第一个default属性的轨道；若未设default，则默认关闭
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="subtitles" label="English" srclang="en" src="en.vtt" default> <track kind="subtitles" label="中文（简体）" srclang="zh-Hans" src="zh-hans.vtt"> </video>
WebVTT 文件格式容错极低，空行、BOM、编码错误都会导致加载失败
常见失败不是 JS 报错，而是字幕静默不显示，且控制台几乎无提示。必须检查：
- 文件必须以 UTF-8 无 BOM 编码保存（VS Code 默认可能带 BOM，需手动选“UTF-8”而非“UTF-8 with BOM”）
- 首行必须为
WEBVTT（全大写，前后无空格），后面可跟空行，但不能有注释或空格前缀 - 时间戳格式严格：
00:00:01.000 --> 00:00:04.500，毫秒位必须为三位，1.0或1均无效 - 文本块之间必须用空行分隔，连续两行文本会被合并为一行显示
WEBVTT 1 00:00:01.000 --> 00:00:04.500 你好，欢迎观看。 2 00:00:05.000 --> 00:00:08.200 这是第二句字幕。
没有“HTML vs HTML5 字幕方案比拼”，只有“是否用对了 HTML5 原生能力”
不存在兼容旧 HTML 的字幕降级路径——因为旧标准根本不支持。所有所谓“HTML 字幕”方案，本质都是 JavaScript 模拟（如 Video.js、Shaka Player），它们接管播放器 UI，自行解析 VTT/ASS/SRT 并渲染到 canvas 或 div 上。这类方案能绕过原生限制（比如支持字体样式、多行排版、ASS 动画），但也带来额外体积、启动延迟和同步精度问题（尤其在 seek 频繁时）。如果只需基础双语切换，原生 <track> 更轻量、更省电、更易维护；若需样式控制或复杂格式，再考虑 JS 方案。
立即学习“前端免费学习笔记（深入）”；
