HTML5 track标签需严格合规并配合JavaScript控制textTracks.mode才能实现语言切换：track须为video直接子元素且位于source后，必须含kind、srclang、label、src四属性，.vtt文件首行为WEBVTT且UTF-8无BOM，JS通过遍历textTracks设mode="showing"激活目标轨道。

HTML5 的 track 标签本身不提供按钮，但配合 JavaScript 控制 textTracks 的 mode 属性，就能让自定义语言切换按钮真正生效——关键不是“加个标签”，而是打通 HTML 声明、文件合规、API 控制三者闭环。

确保 track 元素结构和属性完全合规

浏览器对 track 极其严格，错一个细节，按钮再漂亮也无轨道可切：

• track 必须是 video 的直接子元素，且排在所有 source 之后、 之前
• 每个 track 都必须带齐四个属性：kind="subtitles"、srclang（如 zh、en-US）、label（如 中文(简体)）、src（指向可访问的 .vtt 文件）
• 只在一个 track 上设 default，用于页面加载时默认启用；其余留空，避免行为冲突
• 确认 .vtt 文件首行是顶格、全大写、无空格、无 BOM 的 WEBVTT，时间戳毫秒三位（00:00:01.234），编码为 UTF-8 无签名

用 JavaScript 实现按钮驱动的轨道切换

用户点击按钮时，并不是修改 HTML，而是操作浏览器原生的 TextTrack 对象：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 通过 video.textTracks 获取全部字幕轨道列表
• 遍历判断每个轨道的 srclang，匹配目标语言后设 track.mode = "showing"
• 其余同类型轨道统一设为 "disabled"，确保仅一个激活
• 示例函数（可绑定到按钮 click 事件）：

function switchSubtitle(lang) {
  const tracks = video.textTracks;
  for (let i = 0; i     if (tracks[i].kind === 'subtitles') {
      tracks[i].mode = (tracks[i].srclang === lang) ? 'showing' : 'disabled';
    }
  }
}

同步按钮 UI 状态与当前激活语言

按钮不仅要触发切换，还要实时反映当前状态，提升可感知性：

• 监听 video.textTracks.onaddtrack 或在初始化时遍历，读取当前 mode === "showing" 的轨道语言
• 根据该语言高亮对应按钮（比如添加 active class），其他按钮置灰或取消选中
• 若用户通过右键菜单手动切换了字幕，可通过 track.oncuechange 或轮询 textTracks 检测变化，反向更新按钮状态

适配 Safari 和移动端的隐藏限制

有些按钮点了没反应？很可能是 Safari 或 iOS 视频控件未暴露字幕功能：

• Safari 要求至少一个 track 同时满足：kind="subtitles" + srclang + label + default，否则右下角「三个点」菜单里压根不显示「字幕」入口
• video 标签必须带 controls 属性，否则移动端 Safari 不渲染字幕控制区域
• 跨域加载 .vtt 时，服务端需返回 Access-Control-Allow-Origin: *，否则 Firefox/Edge 静默失败，按钮无效

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