怎么在HTML中使用track元素实现多语言字幕切换-html教程-PHP中文网

track元素必须嵌套在video/audio标签内且紧随其后，srclang需为有效BCP 47标签，VTT文件须以WEBVTT开头、UTF-8无BOM编码、含空行及毫秒级时间戳。

怎么在html中使用track元素实现多语言字幕切换

浏览器只识别嵌套在媒体元素内部的，放错位置（比如写在外面或用 JS 动态 append 到 body）会导致完全不加载。它不是独立组件，而是媒体元素的原生子控件。

常见错误现象：DOMException: Failed to execute 'addTextTrack' on 'HTMLMediaElement': The element does not have a parent media element 就是典型的位置错误。

哪怕内容只是简单文字，也必须以 WEBVTT 开头，否则浏览器静默失败，控制台可能无报错，字幕就是不显示。

常见错误现象：字幕轨道出现在右键菜单里可勾选，但勾选后无任何文字出现——八成是 VTT 文件格式或编码问题。

最小合法 VTT 示例：

WEBVTT
<p>00:00:01.000 --> 00:00:04.000
你好，世界</p>

文件保存时务必选 UTF-8（无 BOM），用记事本另存为会默认加 BOM，推荐用 VS Code 或 Sublime Text 编辑
路径必须可跨域访问：若 video 在 https://a.com，而 src 指向 http://b.com/zh.vtt，需服务端配 CORS 头 Access-Control-Allow-Origin: *

textTracks 是媒体元素的实时只读集合，不能用 DOM 方法增删，也不能直接赋值 mode，必须遍历并设 mode 属性。

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

常见错误现象：调用 document.querySelector('track').mode = 'showing' 无效——因为该 DOM 节点不是实际生效的 track 实例，真正控制权在 video.textTracks[i]。

启用指定语言：

const tracks = video.textTracks;
for (let i = 0; i

mode 只有三个值：disabled（默认）、hidden、showing；设 showing 后浏览器自动匹配当前播放时间戳渲染对应 cue
监听切换：video.textTracks.onchange = () => { /* 当前激活 track 改变时触发 */ };