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

HTML5视频断点续传需开发者主动实现：监听timeupdate、visibilitychange和beforeunload事件保存进度，加载时读取localStorage并设置currentTime，注意防抖、时长校验及跨设备同步限制。

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);  }});