浏览器不自动记住字幕选择，因HTML5规范未要求持久化textTrack.mode状态，刷新后重置为disabled或default值，需用JavaScript+localStorage手动保存并恢复srclang偏好。
track 元素本身不记忆用户偏好，必须靠 JavaScript + localStorage（或 IndexedDB）手动实现，且需在页面加载后立即应用、在用户切换时及时保存。
为什么浏览器不自动记住字幕选择
HTML5 规范未要求浏览器持久化 textTrack.mode 状态。每次刷新页面，track.mode 都会重置为初始值（"disabled" 或 "showing" 如果设了 default）。右键菜单里的选择只在当前会话生效，关掉标签页就清空。
常见错误现象：用户刚选好“English”，刷新页面又回到“中文”或无字幕；Safari 甚至不保留任何切换状态。
- Chrome/Firefox：仅保留当前 tab 内的
mode，不跨刷新 - Safari：连 tab 内切换都可能不响应，除非显式调用
track.mode = "showing" - 所有浏览器：
default属性只影响首次加载，不参与后续记忆逻辑
用 localStorage 保存并恢复 srclang 偏好
核心思路是：把用户最终启用的轨道语言（srclang）存进 localStorage，页面加载时读取并匹配对应 TextTrack，再设 mode = "showing"。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 不能只存
label或索引号——不同设备/语言环境 label 可能变，索引不稳定 - 必须监听
video.textTracks的change事件（不是 click），因为用户可通过右键、快捷键、JS 多种方式切换 - 恢复逻辑要放在
loadedmetadata后，否则textTracks可能为空
简短示例：
const video = document.querySelector('video');
const savedLang = localStorage.getItem('preferredSubtitleLang');
video.addEventListener('loadedmetadata', () => {
if (savedLang) {
const track = Array.from(video.textTracks).find(t => t.language === savedLang && t.kind === 'subtitles');
if (track) track.mode = 'showing';
}
});
video.textTracks.addEventListener('change', () => {
const active = Array.from(video.textTracks).find(t => t.mode === 'showing' && t.kind === 'subtitles');
if (active?.language) {
localStorage.setItem('preferredSubtitleLang', active.language);
}
});
多轨道共存时的冲突与降级处理
当多个 track 共享同一 srclang（比如两个 srclang="zh" 轨道），textTrack.language 无法区分，容易误匹配。此时需依赖 track.label 或自定义 data- 属性辅助识别。
建议做法：
- 每个
<track></track>加唯一data-id，如data-id="zh-simplified" - 存 localStorage 时用
data-id而非language - 恢复时先按
data-id查，查不到再 fallback 到language - 若用户手动禁用所有字幕（
mode = "disabled"），应存null并在恢复时跳过启用逻辑
注意：textTracks 是实时集合，但它的 length 和内容在 loadedmetadata 后才稳定；过早遍历可能漏掉某些轨道。
移动端 Safari 的特殊限制
iOS/iPadOS Safari 默认隐藏字幕控件，除非满足两个条件：
-
<video></video>必须有controls属性 - 至少一个
<track kind="subtitles"></track>带default（哪怕只是临时加，加载后再 JS 移除）
否则 textTracks 可能为空，或 change 事件完全不触发。这不是 bug，是 Safari 的主动策略——它认为没有默认字幕的视频不需要提供 UI 入口。
所以，即使你用了 localStorage，也得先确保 Safari 能“看到”字幕轨道，否则整个记忆链从第一步就断了。
