track标签用于为video或audio元素添加webvtt字幕等轨道，需在video内作为子元素使用，设置kind、src、srclang、label等属性，并注意mime类型、同源策略及javascript动态控制。
track 标签用于为 <video></video> 或 <audio></audio> 元素添加外部字幕、章节、描述或元数据轨道，其中最常见的是 WebVTT 格式的字幕文件。
1. 准备符合规范的字幕文件
字幕必须是 WebVTT（.vtt）格式，文件开头需包含 WEBVTT 声明，且编码为 UTF-8。示例 subtitles.zh.vtt 内容如下：
WEBVTT 00:00:01.000 --> 00:00:04.500 欢迎观看本视频 00:00:05.000 --> 00:00:08.200 这是中文字幕示例
2. 在 video 标签内添加 track 元素
track 必须作为 <video></video> 的子元素，放在 <source></source> 之后、 之前。关键属性包括：
-
kind：指定轨道类型，字幕用
subtitles - src：指向 .vtt 文件的相对或绝对路径
-
srclang：语言代码（如
zh、en），对多语言字幕切换很重要 - label：用户界面中显示的名称（如“中文”、“English”）
-
default（可选）：设为
default表示默认启用该轨道
完整示例：
<video controls width="640" height="360"><source src="movie.mp4" type="video/mp4"><track kind="subtitles" src="subtitles.zh.vtt" srclang="zh" label="中文" default><track kind="subtitles" src="subtitles.en.vtt" srclang="en" label="English"></track></track></source></video>
3. 浏览器支持与注意事项
现代浏览器（Chrome、Firefox、Edge、Safari 10+）均支持 track 和 WebVTT。需注意：
- 服务器需正确返回
text/vttMIME 类型（可通过配置 .vtt 文件响应头实现） - 字幕文件必须与视频同源，或服务端开启 CORS（跨域时）
- 用户需在播放器控件中手动开启字幕（除非设置了
default） -
kind="captions"适用于含音效描述的“闭合字幕”，descriptions用于屏幕阅读器场景
4. 动态控制字幕（JavaScript 简单操作）
可通过 DOM 操作切换轨道：
const video = document.querySelector('video');
const tracks = video.textTracks;
// 启用第一个字幕轨道
if (tracks.length > 0) {
tracks[0].mode = 'showing'; // 可选值：'disabled'、'hidden'、'showing'
}
也可监听 texttrackchange 事件响应用户选择变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
