HTML5视频播放器播放记录及断点续传实现

HTML5 视频播放器默认不具备自动保存播放进度的功能，要实现断点续传，必须由开发者手动编码实现。简单来说，就是通过监听关键事件，将当前播放位置记录并持久化到本地存储，待用户下次访问时自动跳转至上次播放点。其核心技术在于精准捕获用户离开时的播放时间，并在页面加载时恢复该进度。

下面具体介绍实现方法，主要分为三个关键环节：播放进度记录、视频加载后恢复，以及常见边界情况处理。

通过事件监听持久化存储播放进度

• 绑定 video.addEventListener('timeupdate', () => {...})，使用 localStorage 或 IndexedDB 存储 video.currentTime
• 在 document.addEventListener('visibilitychange', () => { if (document.hidden) saveProgress(); }) 中触发保存
• 补充 window.addEventListener('beforeunload', saveProgress) 作为兜底方案（注意：Safari 对此限制严格，不能仅依赖该事件）

视频加载完成后自动恢复播放进度

• 通过 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);
  }
});