localstorage可持久化保存视频播放进度，应在pause、visibilitychange和beforeunload事件中保存，避免timeupdate频繁写入；用video id作key实现多视频独立记忆；加载后需在loadedmetadata事件中校验并恢复进度。
LocalStorage 可以用来持久化保存视频的播放进度（单位：秒），每次用户暂停或离开页面前记录当前 currentTime，下次打开时读取并跳转到该位置。关键在于监听合适的时机写入、避免频繁写入、处理精度与兼容性。
监听页面可见性与播放事件，精准触发保存
不要在 timeupdate 事件中每秒都存——太频繁，影响性能，也容易写坏 LocalStorage（尤其低端设备）。推荐在以下时机保存：
-
用户主动暂停时（
pause事件） -
页面即将隐藏/卸载时（
visibilitychange+beforeunload） -
播放结束前几秒（可选），比如
timeupdate中检测currentTime >= duration - 2时清空进度（表示已看完）
用视频 URL 或 ID 作为 key，支持多视频独立记忆
不能所有视频共用一个 key（如 "videoProgress"），否则会互相覆盖。建议用唯一标识，例如：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 视频元素的
src（需注意带参数的 URL 可能动态变化） - 自定义 data 属性：
<video data-video-id="movie-001"></video>→ key 为"progress_movie-001" - 如果用 video.js 等播放器，可用其
player.options_.sources[0].src或配置的id
读取后自动跳转，但要防错和兜底
页面加载后，先获取存储值，再设置 currentTime。注意三点：
-
必须等视频元数据加载完成（
loadedmetadata或canplay事件后），否则设currentTime无效甚至报错 -
校验数值合法性：确保是数字、≥ 0、≤ 视频总时长（
duration，可能为Infinity或NaN，需判断） -
设置后可选自动播放（需用户手势触发才允许，所以一般不自动播；若已获权限，可调
play()）
示例代码（原生 video 元素）
假设视频有 data-video-id="ep1"：
const video = document.querySelector('video[data-video-id]');
const videoId = video.dataset.videoId;
const progressKey = `progress_${videoId}`;
<p>// 保存进度
const saveProgress = () => {
if (video.currentTime > 0 && isFinite(video.duration)) {
localStorage.setItem(progressKey, video.currentTime.toString());
}
};</p><p>// 恢复进度
const loadProgress = () => {
const saved = localStorage.getItem(progressKey);
if (saved && !isNaN(saved)) {
const time = parseFloat(saved);
if (time >= 0 && time </p><p>// 绑定事件
video.addEventListener('pause', saveProgress);
document.addEventListener('visibilitychange', () => {
if (document.hidden) saveProgress();
});
window.addEventListener('beforeunload', saveProgress);</p><p>// 等元数据就绪后再恢复
video.addEventListener('loadedmetadata', loadProgress);</p><p>// 可选：播放结束时清理
video.addEventListener('ended', () => {
localStorage.removeItem(progressKey);
});</p>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
