HTML字幕标签多语言切换的实现方法-html教程-PHP中文网

WebVTT是唯一可靠多语言字幕方案；需严格满足首行WEBVTT、时间戳HH:MM:SS.mmm、UTF-8无BOM三条件；track必须为video直接子元素且kind/srclang/label/src缺一不可；切换字幕只能通过textTracks[i].mode设为"showing"。

html字幕标签多语言切换的实现方法

直接用配合 WebVTT 文件是唯一可靠、无障碍、浏览器原生支持的多语言字幕方案；自己用

 叠加文字或改 src 属性都是无效的。WebVTT 文件必须满足三个硬性条件
浏览器对 WebVTT 格式极其敏感，任意一条不满足就会静默失败（无报错、无字幕）：

首行必须是顶格、全大写、无空格、无 BOM 的 WEBVTT（写成 webvtt、WEB VTT 或带 UTF-8 BOM 都不行）
时间戳格式严格为 HH:MM:SS.mmm，毫秒必须三位（如 00:01:23.456，写成 .45 或 .4567 会跳过整段）
文件编码必须为 UTF-8 无 BOM（VS Code 中保存时选 “UTF-8”，不能选 “UTF-8 with BOM”）


 标签属性缺一不可
 必须作为  的**直接子元素**，且以下属性一个都不能少、不能拼错：


kind="subtitles"：不能省略，不能写成 caption 或末尾带空格（"subtitles "）

srclang：必须是标准 BCP 47 语言码（如 zh、en-US、ja），chinese 或 zh_CN 会被忽略

label：用户在右键字幕菜单里看到的名字，建议含括号说明变体（如 中文(简体)）

src：指向可访问的 .vtt 文件路径；若跨域，服务端需返回 Access-Control-Allow-Origin: *


示例结构：
<video controls><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="zh.vtt" srclang="zh" label="中文(简体)" default><track kind="subtitles" src="en.vtt" srclang="en" label="English"><track kind="subtitles" src="ja.vtt" srclang="ja" label="日本語"></track></track></track></source></video>
JavaScript 切换字幕只能操作 textTracks[i].mode

浏览器不会响应你改 track.src 或设 track.hidden = false —— 这些操作完全无效。真正起作用的只有 mode 属性：

											
												
												
													DeepBI DHTML 页面生成器
													生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：

- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；  
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；  
- 提及位于 `apps/console/src/featur
												
												下载
												
											
										

遍历 video.textTracks，找到 kind === "subtitles" 且 srclang === "zh" 的轨道
先确保 track.readyState === 2（LOADED），否则可能启用失败
将目标轨道设为 mode = "showing"，其余同 kind 轨道设为 "disabled"

不要用 "hidden"——它只控制 UI 显示，不控制字幕渲染

简易切换函数：
function switchTo(lang) {
  const tracks = video.textTracks;
  for (let i = 0; i 

<h3>容易被忽略的兼容性细节</h3>
<p>看似简单，但几个点常导致上线后字幕消失：</p>


Safari 对  的 default 属性支持不稳定，首次加载未必自动启用，务必 JS 主动触发一次 switchTo()

移动端 WebView（尤其安卓旧版）可能不触发 textTracks 的 load 事件，别依赖它做初始化，改用定时轮询 readyState

如果页面用构建工具（如 Vite/Webpack），确保 .vtt 文件被正确拷贝到输出目录，且路径与 src 值一致——404 时浏览器也不报错

最麻烦的是：所有语言的  必须在 HTML 加载时就存在；运行时动态插入  标签，Chrome 会加载，Firefox 和 Safari 很可能不识别。

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