HTML5 视频播放器默认不具备自动保存播放进度的功能，要实现断点续传，必须由开发者手动编码实现。简单来说，就是通过监听关键事件，将当前播放位置记录并持久化到本地存储，待用户下次访问时自动跳转至上次播放点。其核心技术在于精准捕获用户离开时的播放时间，并在页面加载时恢复该进度。
下面具体介绍实现方法，主要分为三个关键环节：播放进度记录、视频加载后恢复，以及常见边界情况处理。
通过事件监听持久化存储播放进度
利用timeupdate 事件周期性获取当前播放时间，建议每 5 到 10 秒存储一次，避免频繁写入拖慢性能。同时配合 visibilitychange 和 beforeunload 事件，确保用户离开页面时完成最后一次保存。
- 绑定
video.addEventListener('timeupdate', () => {...})，使用localStorage或 IndexedDB 存储video.currentTime - 在
document.addEventListener('visibilitychange', () => { if (document.hidden) saveProgress(); })中触发保存 - 补充
window.addEventListener('beforeunload', saveProgress)作为兜底方案（注意：Safari 对此限制严格，不能仅依赖该事件）
视频加载完成后自动恢复播放进度
页面初始化时，先从本地读取已存储的进度值，再设置currentTime 并调用 play()（但需等待用户交互后才能自动播放）。
- 通过
localStorage.getItem('videoProgress_视频ID')读取存储的时间戳（建议使用视频唯一标识，如 URL 的 hash 或 data-id 属性） - 设置
video.currentTime = savedTime，并监听loadedmetadata事件，确保视频元数据就绪后再执行跳转 - 如果用户已手动点击播放，可直接恢复进度；若尚未交互，仅设置时间点，避免自动调用
play()，防止被浏览器的自动播放策略阻止
处理边界情况以优化用户体验
实际使用中需留意以下几个常见陷阱：- 视频时长变化时清除旧记录：服务端更新了视频文件但 URL 未变，新旧时长可能不同。应比对
video.duration与上次保存的时长，差异过大则忽略旧进度 - 跨设备或浏览器不共享：
localStorage是浏览器隔离的，要跨设备同步必须接入后端账户体系，前端仅负责上传和拉取进度数据 - 移动端暂停易被忽略：移动端常因锁屏或切换后台导致播放中断，建议优先依赖
visibilitychange和pagehide事件（兼容性更好）
最后提供一个轻量级的代码示例，已包含防抖处理：
const video = document.getElementById('myVideo');
const key = `videoProgress_${video.dataset.id || video.src}`;
function sa veProgress() {
if (video.currentTime > 0 && !isNaN(video.duration)) {
localStorage.setItem(key, video.currentTime.toString());
}
}
// 防抖保存（避免 timeupdate 过于频繁）
let sa veTimer;
video.addEventListener('timeupdate', () => {
clearTimeout(sa veTimer);
sa veTimer = setTimeout(sa veProgress, 8000);
});
['visibilitychange', 'pagehide'].forEach(evt => {
document.addEventListener(evt, () => {
if (document.hidden || evt === 'pagehide') sa veProgress();
});
});
// 加载后恢复
video.addEventListener('loadedmetadata', () => {
const sa ved = localStorage.getItem(key);
if (sa ved && parseFloat(sa ved) < video.duration) {
video.currentTime = parseFloat(sa ved);
}
});
