HTML视频播放器怎么添加标签控制字幕-html教程-PHP中文网

字幕不出现在播放器菜单是因为track标签缺关键属性、位置错误或VTT文件不合规；必须满足：紧贴source后的video直接子元素、kind/srclang/label/src四属性齐全、WEBVTT首行全大写无BOM、服务端返回text/vtt MIME类型。

html视频播放器怎么添加标签控制字幕

字幕不会出现在播放器菜单里，不是代码没写，而是标签缺了关键属性、位置错了、或字幕文件本身不合规——浏览器直接静默忽略，连错误提示都不给。

track 标签必须放在 video 内且紧挨 source 之后

浏览器只认这个固定结构： → （可多个）→ →

写在 前面？被忽略
写在外？被忽略
中间插了注释、或空行？部分浏览器会跳过后续所有
本地用 file:// 直接双击打开 HTML？所有 src 加载失败（跨域限制），必须起本地服务，比如 python3 -m http.server


kind、src、srclang、label 四个属性一个都不能少
浏览器不推断默认值，漏一个，字幕就不出现在右键菜单或 CC 按钮里

											
												
												
													财经HTML高端海报生成
													复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
												
												下载
												
											
										


kind="subtitles"：必须是完整单词，"subtitle" 或 "captions" 都不行（后者用途不同，UI 分开）

src="zh.vtt"：路径要能访问；跨域需服务端返回 Access-Control-Allow-Origin: *


srclang="zh-Hans"：必须是标准 BCP 47 语言码，"chinese" 或 "zh-cn" 无效

label="中文(简体)"：为空时菜单显示 (no label)，用户根本不知道这是哪条轨道

WebVTT 文件必须严格合规，容错率为零
哪怕首行多一个空格、时间戳毫秒少一位、文件带 BOM，浏览器都当它不存在

首行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT

时间格式必须是 00:00:01.234 --> 00:00:04.567：小时/分/秒两位，毫秒三位，中间两个空格
编码必须是 UTF-8 无 BOM：Windows 记事本默认带 BOM，务必用 VS Code 或 Notepad++ 选 “UTF-8 无签名” 保存
服务器要返回 Content-Type: text/vtt：Nginx/Apache 需显式配置 MIME 类型，否则 Safari 可能解析失败

最容易被忽略的是：你改完 HTML 和 VTT 后，浏览器可能缓存了旧的 track 元素或网络响应——硬刷新（Ctrl+Shift+R）或清空 Network 面板重试，比反复检查语法更有效。