HTML track元素记忆用户字幕偏好的方法-html教程-PHP中文网

浏览器不自动记住字幕选择，因HTML5规范未要求持久化textTrack.mode状态，刷新后重置为disabled或default值，需用JavaScript+localStorage手动保存并恢复srclang偏好。

html track元素记忆用户字幕偏好的方法

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);
  }
});