欢迎来到雄杰鑫电商资讯网
技术教程

HTML5怎么给视频加字幕_通过track标签添加SRT字幕的方法【教程】

絕刀狂花 次阅读
track标签必须位于video内部且在source之后，SRT文件需符合格式规范、UTF-8无BOM编码并支持CORS，kind、srclang、label属性缺一不可，推荐转为WebVTT提升兼容性。

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

很多初学者把 放在 外面，或者写在 前面，结果字幕完全不显示。浏览器只认「 元素内部、 标签闭合之后」的 。

正确顺序是： → （可多个）→ → 









SRT 文件必须符合规范，且服务器要支持 CORS


浏览器对  加载的 SRT 文件非常敏感：时间戳格式错一位、空行多一个、编码不是 UTF-8，都会静默失败——控制台可能只报 Failed to load resource，不提示具体原因。



常见问题包括：


    

  • SRT 时间戳用逗号分隔毫秒（00:01:23,456），不能用句点
    • 

  • 序号后必须换行，时间行后必须换行，字幕正文后必须空一行
    • 

  • 文件需保存为 UTF-8 无 BOM 编码（用 VS Code 或 Notepad++ 确认）
    • 

  • 如果视频和 SRT 不在同一域名下，服务器必须返回 Access-Control-Allow-Origin 头
    • 



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


kind="subtitles" 是唯一能触发字幕 UI 的取值（captions 用于带声音描述的字幕，descriptions 等不显示在画面上）；srclang 必须是合法的 BCP 47 语言标签（如 zh、en-US），否则设置 default 也不会自动启用；label 是用户在右键菜单里看到的名字，为空时浏览器可能显示 “(no label)”。



错误示例： —— 缺 srclang，字幕菜单里不会出现。



Chrome 和 Firefox 对 SRT 解析行为不一致


Firefox 原生支持 SRT，Chrome 实际上是把 SRT 转成 WebVTT 再解析，所以某些边缘格式（比如时间戳末尾多空格、注释行以 NOTE 开头）在 Chrome 里会失败，Firefox 却能显示。



稳妥做法：


    

  • 用在线工具（如 srt2vtt）把 SRT 转成 WebVTT，再改 src 后缀和 type 属性
    • 

  • 或直接改用 WebVTT 格式（首行必须是 WEBVTT，时间戳用 00:01:23.456，句点分隔毫秒）
    • 

  • 不要依赖 default 属性在所有浏览器中自动开启——用户仍需手动点击字幕按钮
    • 



SRT 看似简单，但真正跑通需要同时满足 HTML 结构、文件格式、HTTP 响应、浏览器兼容四重条件，漏掉任何一环都只是“看起来写了字幕”。





            
 ai 常见问题 浏览器 工具 html chrome 编码 ui access firefox http default vs code bom kind notepad Resource html5

相关文章

按ESC键退出。