HTML字幕标签怎么指定srt格式的字幕源-html教程-PHP中文网

标签不能直接加载SRT文件，因浏览器原生仅支持WebVTT格式；需将SRT转为UTF-8无BOM的.vtt文件，首行为WEBVTT，时间戳用句点分隔，并配置服务器返回text/vtt MIME类型。

html字幕标签怎么指定srt格式的字幕源

track 标签不能直接加载 SRT 文件

浏览器原生不支持直接解析 .srt 文件作为的 src。即使你写了，Chrome 会静默失败（控制台只报 Failed to load resource），Firefox 虽能勉强解析，但行为不可靠——这不是配置问题，是规范限制。

必须转成 WebVTT 格式再用 track 引入

WebVTT 是 HTML5 唯一明确标准化的字幕格式，只保证对 text/vtt MIME 类型和正确结构的 .vtt 文件有稳定支持。SRT 必须转换：

用在线工具如 srt2vtt 或桌面软件 Subtitle Edit 转换，别手动改后缀
转换后检查首行是否为纯文本 WEBVTT（无空格、无 BOM、全大写）
时间戳必须用句点分隔毫秒：00:01:23.456 --> 00:01:26.789，不是逗号
保存为 UTF-8 无 BOM 编码（VS Code 右下角确认 → “Save with Encoding”）
服务器需返回 Content-Type: text/vtt，Nginx/Apache 要显式配置 MIME 类型

track 标签位置和属性一个都不能少

必须嵌在内部，且严格位于所有之后、之前。三个属性缺一不可：

kind="subtitles"：只能是 "subtitles"（不是 "subtitle" 或空值），否则字幕菜单不出现
srclang="zh"：必须是合法 BCP 47 语言标签（如 "zh"、"en-US"），"ch" 或 "cn" 无效
label="中文"：用户右键点击字幕按钮时看到的名字，为空则显示 (no label)

正确示例：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

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

CORS 和 default 属性的实际效果很有限

如果字幕文件与页面不同源，服务器必须返回 Access-Control-Allow-Origin 头，否则跨域请求直接被拦，连错误细节都不给。而 default 属性只是“建议浏览器默认选中”，它不等于自动开启显示——用户仍需手动点击视频右下角的字幕按钮才能看到。别依赖它实现“开箱即用”的字幕体验。

真正容易被忽略的是：WebVTT 文件里每条字幕块之间不能有空行，首行 WEBVTT 后必须紧跟换行，时间戳行末不能有多余空格，这些看似微小的格式偏差，在 Chrome 里会导致整条轨道加载失败且无提示。