可通过localStorage保存并恢复视频播放器的默认分辨率设置：监听用户选择后存入字符串值，初始化时读取并应用，需配合播放器清晰度切换能力，同时提供重置功能及异常兜底。
可以通过 localStorage 保存用户在网页端视频播放器中手动选择的默认分辨率（如 720p、1080p、自动），并在下次加载时读取并应用该设置。关键在于监听用户操作、安全存取、合理回退，并与播放器逻辑联动。
1. 获取并保存用户选择的分辨率偏好
当用户通过下拉菜单、按钮或设置面板切换分辨率时，将选中的值写入 localStorage：
// 假设有一个 <select id="resolution-select">
const select = document.getElementById('resolution-select');
select.addEventListener('change', () => {
const value = select.value; // 如 '720p'、'1080p'、'auto'
localStorage.setItem('videoDefaultResolution', value);
});
注意：确保值为字符串且合法；避免直接存对象，如需结构化数据可使用 JSON.stringify()，但此处单值字符串更轻量安全。
2. 页面初始化时读取并应用默认分辨率
在视频播放器初始化前（例如 player.load() 或 source 设置前），从 localStorage 读取并优先使用该值：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
function getDefaultResolution() {
return localStorage.getItem('videoDefaultResolution') || 'auto';
}
// 应用于播放器（以 Video.js 为例）
const player = videojs('my-video', {
html5: {
hls: {
overrideNative: true
}
}
});
player.ready(() => {
const savedRes = getDefaultResolution();
if (savedRes !== 'auto') {
// 尝试匹配并切换到对应层级（需播放器支持）
const tech = player.tech_();
if (tech && tech.setPlaybackRate) {
// 实际适配需结合自定义 rendition 切换逻辑（见下一点）
applyResolutionToPlayer(player, savedRes);
}
}
});
3. 与播放器的清晰度切换能力配合（关键细节）
localStorage 只负责记忆，真正生效依赖播放器是否支持运行时分辨率切换（如 HLS 的 levels 或 DASH 的 representations）。常见处理方式：
- 使用支持清晰度切换的播放器（如 videojs-contrib-quality-levels + videojs-http-streaming）
- 在
loadedmetadata或levelchange后检查当前 level 是否匹配保存值，不匹配则调用setCurrentLevel() - 若播放器不支持动态切源，可在
src加载前拼接带分辨率标识的流地址（如stream_1080p.m3u8），再存入 localStorage
4. 提供重置与兼容性兜底
用户可能想恢复默认，应提供“恢复默认”按钮，并清除对应 key：
document.getElementById('reset-resolution').addEventListener('click', () => {
localStorage.removeItem('videoDefaultResolution');
// 同时重置 UI 选中状态
document.getElementById('resolution-select').value = 'auto';
});
兼容性方面：localStorage 在所有现代浏览器中可用，但需注意：
- 隐身模式下部分浏览器会拒绝访问（捕获
QuotaExceededError异常） - 跨域 iframe 中受限；确保脚本运行在同源环境
- 敏感场景（如企业内网）可能被策略禁用，建议加 try/catch 包裹读写逻辑
