html5视频多语言字幕切换依赖texttrack api与track元素配合，需手动设置srclang、label及mode属性，通过javascript控制texttracks中各轨道的showing状态实现切换。

HTML5视频支持多语言字幕切换，核心是利用TextTrack API 与 track 元素配合实现。关键不在“自动识别”，而在手动控制轨道的mode状态和语言标识。

正确声明双语字幕轨道

在<video></video>内用多个<track></track>标签分别定义中、英文轨道，必须设置kind="subtitles"、唯一srclang和可读label：

<video controls><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></track></source></video>

注意：default仅指定初始启用轨道，不锁定切换逻辑；浏览器不会自动根据系统语言选轨，需JS干预。

通过textTracks获取并切换轨道

video.textTracks返回TextTrackList，每个轨道是TextTrack对象，其mode属性控制显示状态（"disabled" / "hidden" / "showing"）：

• 设为"showing"：启用并显示该轨道
• 设为"disabled"：彻底关闭（不解析、不触发cuechange）
• 同一时间仅应有一个字幕轨道处于"showing"状态

示例切换函数：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

function switchSubtitle(lang) {
  const tracks = video.textTracks;
  for (let i = 0; i 

动态创建轨道（无需预置track标签）

若字幕URL由接口返回，可用JS动态添加轨道：

• 调用video.addTextTrack(kind, label, srclang)创建空轨道
• 再用fetch加载VTT内容，解析后逐条用addCue()注入
• 注意：动态添加的轨道默认mode="disabled"，需手动设为"showing"

避免直接修改src属性——动态轨道不支持该方式加载外链VTT。

监听字幕状态变化与用户交互

监听textTracks变更或轨道自身事件可增强体验：

• video.textTracks.onaddtrack：捕获新轨道加入（如动态加载完成）
• track.oncuechange：当前活动轨道cue更新时触发（适合高亮当前句）
• 结合track.mode实时判断当前激活语言，同步UI按钮状态

不要依赖track.readyState轮询——VTT加载完成会自动触发load事件，但需确保<track></track>已插入DOM后再监听。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！