HTML track标签如何添加视频字幕？文本轨道资源应用-html教程-PHP中文网

track标签本身不添加字幕，仅声明外部文本轨道；字幕显示需同时满足结构位置正确（video内紧贴source后）、属性完整（kind/srclang/label缺一不可）、webvtt文件合规（首行webvtt、utf-8无bom、时间戳格式严格）、服务端响应达标（content-type: text/vtt、同源或cors）四条件。

html track标签如何添加视频字幕？文本轨道资源应用

track 标签本身不添加字幕，它只是向 video 元素声明一条外部文本轨道；字幕能否显示，取决于四个条件是否同时满足：结构位置正确、属性完整合法、.vtt 文件格式合规、服务端响应达标。漏掉任意一个，浏览器通常静默失败——控制台可能没报错，但字幕菜单为空或根本不出现在右键菜单里。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

track 必须是 video 的直接子元素且紧贴 source 之后

浏览器只在 video 开始标签后、所有 source 闭合之后、之前识别 track。放错位置等于没写，且多数浏览器不报错。

❌ 错误：把 <track></track> 写在 <video></video> 外面、包在 <div> 里、插在 <code><source></source> 前面
❌ 错误：在 <source></source> 和 <track></track> 之间加空行、注释或其它标签（部分浏览器会中断解析）

✅ 正确顺序示例：

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

kind、srclang、label 这三个属性缺一不可

video.textTracks.length

kind="subtitles" 必须显式写出；"subtitle" 或空值会被忽略
srclang 在 kind="subtitles" 时强制要求，必须是合法 BCP 47 码（如 "zh"、"en-US"），不能是 "ch" 或 "english"
label 是用户在播放器字幕菜单中看到的名字；为空时可能显示 "(no label)"，多语言场景下无法区分

.vtt 文件首行和时间戳格式极其严格

Failed to parse WebVTT

首行必须是 WEBVTT（全大写、顶格、前后无空格、无 UTF-8 BOM）
WEBVTT 后必须紧跟一个空行（\n\n，不是 \r\n 或空格）
时间戳格式为 00:00:01.234 --> 00:00:04.567：毫秒位必须三位，箭头前后各一个空格
文件编码必须为 UTF-8 无 BOM；VS Code 保存时选 “UTF-8”，不要选 “UTF-8 with BOM”

src 路径与服务端响应必须匹配

<track src=""></track>

本地开发时，file:// 协议下 track 必然失效（Chrome/Firefox 明确禁用），必须起本地服务（如 python3 -m http.server）
服务器必须返回 Content-Type: text/vtt；Nginx 示例配置：
```
types {
text/vtt vtt;
}
```
路径区分大小写：zh.vtt ≠ ZH.VTT（尤其 Linux 服务器）
若视频在 HTTPS 页面，src 也必须是 HTTPS；跨子域需服务端配 Access-Control-Allow-Origin