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

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 saveProgress() {
  if (video.currentTime > 0 && !isNaN(video.duration)) {
    localStorage.setItem(key, video.currentTime.toString());
  }
}

// 防抖保存（避免 timeupdate 过于频繁）
let saveTimer;
video.addEventListener('timeupdate', () => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(saveProgress, 8000);
});

['visibilitychange', 'pagehide'].forEach(evt => {
  document.addEventListener(evt, () => {
    if (document.hidden || evt === 'pagehide') saveProgress();
  });
});

// 加载后恢复
video.addEventListener('loadedmetadata', () => {
  const saved = localStorage.getItem(key);
  if (saved && parseFloat(saved) < video.duration) {
    video.currentTime = parseFloat(saved);
  }
});