必须将中英双语字幕合并到单个WebVTT文件中，用vclass区分拼音与翻译行，并通过::cue(vclass) CSS选择器控制样式，才能实现上下并排显示。
浏览器原生不支持两个 track 同时显示
想让中英双语字幕上下并排显示（比如上行拼音、下行翻译），不能靠加两个 track 并设 default——浏览器只允许一个 subtitles 轨道处于 "showing" 状态，另一个会自动变成 "disabled"。这不是 bug，是规范行为。
常见错误现象：
- 写了两个
和，但菜单里只出现一个选项 - 手动启用一个后，另一个立刻消失，控制台查
video.textTracks[i].mode发现始终只有一个"showing"
必须把双语内容合并进单个 .vtt 文件
真正可行的做法是：把翻译 + 拼音（或其他辅助信息）写进同一个 WebVTT 文件，用 HTML 内联类名区分行，并通过 CSS 控制布局。这样浏览器只加载一个轨道，但内容可分层渲染。
关键点：
- VTT 文件里用
vclass，不是class） - 时间轴必须完全一致，否则两行不会同步出现
- 首行必须是顶格
WEBVTT，后面空一行，毫秒三位，UTF-8 无 BOM
示例 zh-pinyin-en.vtt 片段：
WEBVTT <p>00:00:01.000 --> 00:00:04.000 <vclass>nǐ hǎo, hěn gāo xìng jiàn dào nǐ。 <vclass>Hello, nice to meet you.</vclass></vclass></p>
用 ::cue 和 ::cue(vclass) 控制双行样式
WebVTT 的 vclass 会被映射为伪元素选择器，可以直接用 CSS 定制每行位置、字体、颜色等。不需要 JS 注入 DOM，也不用改 track.mode。
实操建议：
- 给拼音行加
font-size: 0.7em; line-height: 1; margin-bottom: 0.2em; - 翻译行保持默认大小，或加
font-weight: bold; - 用
::cue(vclass("pinyin"))精确匹配，避免影响其他vclass - Safari 对
::cue(vclass)支持较晚（iOS 16.4+ / macOS 13.3+），旧版本需降级为通用::cue加text-shadow区分
label 属性仍要唯一且明确
即使只用一个 track 实现双语，label 也不能写成“双语”这种模糊值。用户需要知道这行字幕到底含什么信息。
推荐命名方式：
label="中文(带拼音)+English"label="Japanese (with furigana) + English"label="Arabic (with transliteration) + English"
如果还提供纯翻译版（无拼音），就得另建一个 track，并确保它的 label 明显不同，比如 label="中文(简体) - 纯翻译"。否则用户无法分辨该选哪个。
最容易被忽略的是：VTT 文件里所有 vclass 名称必须小写、无空格、无特殊字符；CSS 中的 ::cue(vclass("xxx")) 必须与之完全一致，包括大小写——错一个字母，样式就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
