HTML怎么在网页中用标签嵌入WebVTT字幕-html教程-PHP中文网

字幕不显示八成是WEBVTT文件或track位置/属性错误：首行须顶格全大写无BOM的WEBVTT，时间戳格式为00:00:01.234 --> 00:00:04.567，track必须紧接source后且为video直接子元素，kind、src、srclang、label四属性缺一不可。

html怎么在网页中用标签嵌入webvtt字幕

字幕不显示，八成不是代码写错了，而是 WEBVTT 文件本身或的位置/属性出了问题——浏览器对这两处极其严格，错一个字符就静默失败。

WebVTT 文件必须顶格写 WEBVTT 且无 BOM

浏览器解析器不接受任何妥协：首行必须是全大写、顶格、前后无空格、无不可见字符的 WEBVTT。写成 webvtt、WebVTT、 WEBVTT（开头有空格）或带 UTF-8 BOM 都会直接跳过整个文件。

用 VS Code 打开 .vtt 文件 → 右下角点击编码格式 → 选“Save with Encoding” → “UTF-8”（不是“UTF-8 with BOM”）
时间轴必须是 00:00:01.234 --> 00:00:04.567 格式：小时/分钟/秒各两位，毫秒三位，--> 两侧各一个空格
中文、日文等非 ASCII 字符要能正常显示，否则说明编码仍含 BOM 或保存错误

必须是

放错位置等于没写：它不能在外，不能在前，不能被

 或注释包裹，也不能写成自闭合标签（ 无效）。
正确顺序：

多个  可并列，但只有 kind="subtitles" 或 kind="captions" 的才会出现在右键菜单里

 不支持 type 属性，别加；也不支持 charset，编码靠文件本身

四个属性缺一不可：kind、src、srclang、label
浏览器只认显式声明，不会推断默认值。漏掉任意一个，该轨道就不会出现在字幕切换菜单中，连调试都看不到痕迹。

											
												
												
													Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
													实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
												
												下载
												
											
										


kind="subtitles"：必须写全，不能是 caption、subtitles （末尾空格）或 subs


src：路径需可访问；跨域时服务端必须返回 Access-Control-Allow-Origin: *


srclang="zh"：用 ISO 639-1 码（如 zh、en、ja），不用 chinese 或 zh-CN（后者虽部分浏览器认，但非标准）

label="中文(简体)"：这是用户在播放器里看到的名字，建议加括号注明变体，避免歧义

default 属性只影响首次加载，且只能设一个
default 是布尔属性，写了就生效，不需要 default="true"。但它只在页面初次加载时启用对应轨道；用户手动切换后，刷新页面也不会重置回 default 轨道。

多个  都写 default，浏览器只启用第一个

kind="chapters" 或 kind="metadata" 不该加 default，它们本就不该默认显示
想用 JS 控制默认行为（比如按系统语言匹配），就别设 default，改用 video.textTracks[i].mode = "showing"


最容易被忽略的是：即使 HTML 和 VTT 全部正确，如果服务器没配对 .vtt 的 MIME 类型（应为 text/vtt），某些浏览器（尤其是 Safari）也会拒绝加载——检查 Network 面板里 .vtt 请求的 Response Headers 是否含 Content-Type: text/vtt。