HTML5 标签通过 元素支持多语种外挂字幕，需正确设置 kind、srclang、label、src 属性，字幕文件须为 UTF-8 编码的 WebVTT 格式并声明 WEBVTT。
HTML5 的 标签通过 元素支持外挂字幕，实现多语种切换。关键在于正确设置 kind、srclang、label 和 src 属性，并确保字幕文件为标准 WebVTT 格式。
准备符合规范的 WebVTT 字幕文件
每个语种需单独一个 .vtt 文件，文件开头必须包含 WEBVTT 声明，时间格式为 HH:MM:SS.mmm，内容 UTF-8 编码。例如 zh.vtt：
WEBVTT 00:00:01.000 --> 00:00:04.000 欢迎观看本视频 00:00:05.000 --> 00:00:08.000 字幕已启用
英文 en.vtt 同理，注意 srclang 必须与文件实际语言一致。
在 video 标签中嵌入多个 track 元素
必须作为 的子元素，且放在
- kind="subtitles"：标识这是用户可选的字幕（不是描述音轨或章节）
-
srclang：严格使用 ISO 639-1 语言代码（如
zh、en、ja） - label：显示在浏览器字幕菜单中的名称（建议含语言名，如“中文（简体）”）
- default（可选）：仅一个 track 可设此属性，页面加载时默认启用
示例代码：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<video controls width="640" height="360"><source src="movie.mp4" type="video/mp4"><track kind="subtitles" label="中文（简体）" srclang="zh" src="zh.vtt" default><track kind="subtitles" label="English" srclang="en" src="en.vtt"><track kind="subtitles" label="日本語" srclang="ja" src="ja.vtt"></track></track></track></source></video>
浏览器兼容性与用户控制要点
Chrome、Firefox、Edge、Safari（macOS/iOS 10+）均原生支持 。用户可通过视频控件的「字幕」按钮手动切换语言。
- 若未显示字幕菜单，请确认：
kind="subtitles"、srclang有效、文件路径正确、服务器返回text/vttMIME 类型 - 移动端 Safari 要求
有controls属性才能触发字幕菜单 - 不能用 JavaScript 直接修改
track.mode来“自动切换”，但可通过监听onload和onerror做容错处理
进阶：用 JS 动态控制字幕显示
可通过 DOM 操作读取和切换当前激活的字幕轨道：
-
video.textTracks返回所有 track 的TextTrackList - 遍历
textTracks[i].mode = 'showing'可启用某条轨道（其余自动设为disabled） - 推荐封装函数，根据用户偏好语言匹配
srclang并激活对应 track
注意：直接设置 mode 不会触发浏览器原生菜单状态更新，仅影响渲染效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
