track标签必须嵌套在video标签内且不可自闭合;src需为有效可访问的UTF-8无BOM WebVTT文件,格式须严格符合标准(含WEBVTT声明、正确时间戳、空行);srclang须遵循BCP 47;default仅表示默认选中,用户仍需手动开启字幕;iOS Safari存在兼容限制,需真机测试或采用外挂方案。

track 标签必须嵌套在 video 标签内部,且不能自闭合
直接写 <track></track> 或放在 <video></video> 外面,字幕根本不会加载。浏览器只认嵌套在 <video></video> 开始标签和结束标签之间的 <track></track> 元素。
- 正确写法:
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="English" srclang="en" src="en.vtt" default><track kind="subtitles" label="中文" srclang="zh" src="zh.vtt"></track></track></source></video>
-
src必须是有效可访问的 .vtt 文件路径(相对或绝对),404 会导致字幕静默失败,控制台通常不报错 -
srclang值要符合 BCP 47 标准(如zh、zh-CN、en-US),填ch或cn会导致浏览器忽略该 track
vtt 文件格式稍有错误,字幕就完全不显示
WebVTT 不是纯文本随便写写就行。哪怕第一行少了 WEBVTT 声明,或时间戳格式错一位(比如用 , 代替 .),整个文件都会被丢弃。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 最小合法 vtt 示例:
WEBVTT 00:00:01.000 --> 00:00:04.000 Hello, this is English. 00:00:05.000 --> 00:00:08.000 How are you today?
- 注意:空行必需,时间戳必须是
HH:MM:SS.mmm格式,-->两侧有空格 - UTF-8 编码 + 无 BOM,用记事本保存容易带 BOM,推荐用 VS Code 或 Sublime Text 保存为 “UTF-8”(明确不含 BOM)
浏览器默认不自动启用字幕,用户需手动开启
default 属性只表示“默认选中”,不代表“默认显示”。用户仍需点击视频右下角字幕图标(? 图标)并选择对应语言,字幕才真正浮现。
- 如果希望首次播放即显示,除了加
default,还需确保:<video></video>有controls属性,且用户没在浏览器设置里禁用字幕 - JavaScript 动态启用:用
video.textTracks[0].mode = 'showing'可强制显示第一个字幕轨(但需等loadedmetadata事件后操作) - 多个
kind="subtitles"轨道互斥,同一时间只能有一个处于showing状态
移动端 Safari 对 track 支持有限,尤其 iOS 16 以前
iOS Safari 默认隐藏字幕控件,即使写了 <track></track> 且 vtt 正确,用户也找不到开关入口 —— 这不是你代码的问题,是系统限制。
- 真机测试必备:iOS 模拟器不可靠,必须用真实 iPhone/iPad 验证
- 兼容方案:提供外挂字幕按钮 + 自定义渲染层(用 JavaScript 解析 vtt 并 overlay div),但成本高
- 替代思路:对关键内容,把字幕文字同步写进页面下方
<div class="subtitle-display">,用 JS 同步 video.currentTime 更新内容 实际部署时,最常卡在 vtt 文件编码或路径 404,而不是 HTML 结构本身。先 curl 或直接浏览器访问 <code>zh.vttURL,确认能打开且格式干净,再调 HTML。










