html5 video无法通过js动态修改track的src切换字幕；应预置多语言track并用texttracks api控制显示状态，或改用自定义字幕层渲染。

HTML5 中 video 不能通过 JS 动态修改 `` 标签的 `src` 属性来切换字幕，也不能用 `setAttribute('src', ...)` 让浏览器重新加载。真正可行的方式是：预置所有语言的 `` 元素，再用 JavaScript 控制其显示状态；或完全不用 ``，改用自定义字幕层手动渲染。下面分两种主流场景说明。

预置 track 后用 textTracks API 切换

这是最稳定、兼容性最好、无障碍支持完善的做法。前提是所有字幕文件已在 HTML 中声明：

• 在 `
• 确保每个 `.vtt` 文件 UTF-8 无 BOM，首行为 WEBVTT，时间格式为 00:00:01.234 --> 00:00:03.456
• JS 切换时，遍历 `video.textTracks`，把匹配 `srclang` 的轨道设为 `"showing"`，其余设为 `"disabled"`

示例函数：

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

⚠️ 注意：必须等轨道加载完成（`track.readyState === 2`）再设 mode，否则无效；移动端 Safari 默认不启用任何轨道，即使写了 `default` 也没用，必须手动触发。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

动态创建并注入字幕轨道（无需预置 track）

适合字幕 URL 来自接口、无法提前写死 HTML 的场景。核心是调用 `addTextTrack()` 创建空轨道，再用 `fetch + addCue()` 注入内容：

• 调用 `video.addTextTrack('subtitles', '中文', 'zh')` 创建新轨道，返回 `TextTrack` 实例
• 用 `fetch` 加载 `.vtt` 内容，解析成 cue 对象（需手动处理时间轴和文本块）
• 对每个 cue 调用 `track.addCue(new VTTCue(startTime, endTime, text))`
• 最后设 `track.mode = 'showing'`（默认是 `'disabled'`）

⚠️ 关键限制：不能直接给动态创建的轨道设 `src` 属性，也不支持 `track.src = 'xxx.vtt'` —— 这种方式浏览器完全忽略。

不推荐但可用的自定义字幕层方案

当需要高度定制样式、动画、多行排版或实时翻译时，可绕过原生轨道：

• 在 video 外层包裹一个相对定位容器，内部放 `
  `
• 监听 `timeupdate` 事件，根据 `video.currentTime` 查找对应语言的字幕文本
• 把文本插入 div，并控制显隐、过渡、字体缩放等（注意防抖，避免频繁 DOM 操作）
• 需自行解析 VTT 文件结构，或后端返回 JSON 格式的时间轴字幕数据

缺点明显：失去原生字幕菜单、无障碍支持弱、时间同步易漂移、移动端适配复杂。仅建议特殊需求下使用。

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