HTML如何添加字幕标签？视频字幕挂载技巧-html教程-PHP中文网

字幕不显示主因是track标签位置错误或缺失kind、srclang、label属性，且VTT文件需满足HTTP 200、Content-Type为text/vtt、首行WEBVTT、时间戳格式正确。

html如何添加字幕标签？视频字幕挂载技巧

字幕不显示，90% 是 track 标签写错了位置或缺了关键属性，不是浏览器不支持，也不是 VTT 文件内容有问题。

track 必须紧贴 source 后、且在 video 内部

浏览器只认一种嵌套顺序：video → source（可多个）→ track（可多个）→ /video。任何偏移都会静默失效——控制台不报错，字幕菜单里直接空着。

track 不能放在 source 前面（哪怕只隔一个换行）
track 不能写在 video 外（比如套在 div 里，或紧跟在 video 标签后）
多个 track 之间不要插注释、空行或其它标签（Safari 和旧版 Edge 会中断解析）

正确示例：

<video controls><br><source src="movie.mp4" type="video/mp4"><br><track kind="subtitles" srclang="zh" label="中文" src="zh.vtt" default><br><track kind="subtitles" srclang="en" label="English" src="en.vtt"><br></track></track></source></video>

kind、srclang、label 三个属性一个都不能少

这不是“建议填写”，而是浏览器识别轨道的硬性字段。缺任意一个，track 就被忽略，连加载请求都不会发。

kind 必须是 "subtitles"（注意复数 s），写成 "subtitle" 或留空，浏览器当 kind="metadata" 处理，不会出现在字幕菜单
srclang 必须是合法 BCP 47 编码，如 "zh"、"en-US"、"ja"；"ch"、"cn"、"chinese" 全部无效
label 是用户在播放器字幕菜单里看到的名字，为空时可能显示 "(no label)"，无法区分语种

VTT 文件必须过四关才真正可用

src 指向的 .vtt 文件，得同时满足四个条件，否则加载失败但无提示：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

HTTP 返回状态码必须是 200（本地开发用 file:// 协议必挂，必须起服务，如 python3 -m http.server）
服务端必须返回 Content-Type: text/vtt（Nginx/Apache 需显式配置 MIME 类型，否则 Safari 可能拒绝解析）
文件首行必须严格为 WEBVTT（全大写、顶格、无空格、无 BOM；写成 webvtt 或带 UTF-8 BOM 会失败）
时间戳格式必须为 00:00:01.234 --> 00:00:04.567（毫秒三位、箭头前后各一个空格；少一位或多一位都解析失败）

default 属性有隐含限制

default 表示页面加载时默认启用该轨道，但它只在同 kind 下生效，且只能设在一个 track 上。

如果写了多个 default，仅第一个生效；其余会被忽略
不同 kind（如一个 subtitles、一个 captions）可以各自设 default
default 不等于“自动显示”：用户手动关闭字幕后，刷新页面也不会恢复，需用 JS 调用 textTracks[i].mode = "showing"

最常被忽略的是服务器 MIME 类型配置和本地 file:// 协议限制——这两项不解决，其他全写对也白搭。