html5视频字幕需webvtt文件与标签严格配合：webvtt首行为顶格全大写webvtt、后跟空行、时间戳格式为hh:mm:ss.mmm→hh:mm:ss.mmm、utf-8无bom；须为直接子元素且在后，必需kind、srclang、src、label四属性，缺一不可。
HTML5 视频字幕依赖 WebVTT 格式和 <track></track> 标签协同工作，二者缺一不可。浏览器只认标准 WebVTT 文件 + 正确嵌套的 <track></track>，稍有偏差，字幕就彻底不出现——不是错位或延迟，而是菜单里根本没选项。
WebVTT 文件必须严格合规
WebVTT 解析器容错率为零，以下三点任一出错，整个文件被静默忽略：
-
首行必须是顶格、全大写、无空格、无 BOM 的
WEBVTT（写成webvtt、WebVTT或带 UTF-8 BOM 都失败） -
首行后必须紧跟一个空行（
\n\n），不能是空格、制表符或注释行 -
每段字幕的时间戳格式必须为
HH:MM:SS.mmm --> HH:MM:SS.mmm：小时、分钟、秒均为两位，毫秒三位，箭头前后各两个空格；时间块之间用空行分隔
文件编码必须为 UTF-8 无 BOM（Windows 记事本默认带 BOM，推荐用 VS Code 或 Notepad++ 保存为 “UTF-8 without BOM”）；中文、日文等字符需确保正常显示，避免方块或乱码。
<track></track> 必须作为 <video></video> 的直接子元素，且紧接在所有 <source></source> 标签之后、 之前。浏览器按顺序解析：先读 <source></source> 知道播什么，再读 <track></track> 知道配什么轨道。
✅ 正确示例：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
❌ 常见错误：放在 <source></source> 前、包在 <div> 里、写在 <code><video></video> 外、中间插入注释或空行、用 JS 动态 append（除非在 video 加载前插入并强制重解析）。
四个必需属性一个都不能少
浏览器注册字幕轨道时，只认显式声明的四个属性，缺一即失效：
-
kind="subtitles"：必须写全，不能是subtitle、captions（语义不同）或留空 -
srclang="zh-CN"：仅对subtitles和captions强制要求，值必须是 BCP 47 标准语言码（如zh-Hans、en-US、ja），ch、cn、chinese均无效 -
src="zh.vtt"：路径需可访问，HTTP 返回状态码 200，服务器 MIME 类型设为text/vtt（Nginx/Apache 需显式配置）；跨域需服务端返回Access-Control-Allow-Origin: * -
label="中文(简体)"：用户在播放器字幕菜单中看到的名称，建议填写，否则可能为空白或默认名
若需默认启用，可加 default 属性，但仅推荐用于 subtitles 或 captions 类型。
浏览器如何解析与呈现
<track></track> 本身不渲染、不解析、不匹配——所有工作由浏览器内置的 WebVTT 解析器和 textTracks API 自动完成。验证是否生效，可在控制台输入：
返回大于 0 才说明轨道已被识别。字幕菜单是否显示、能否切换、是否随时间自动出现，均由浏览器原生行为控制；如需自定义交互（如按钮切换、记忆偏好），需结合 JavaScript 操作 textTracks API。
