HTML5 <video> 标签需结合 JavaScript 和 localStorage 实现断点续播：通过 timeupdate 事件防抖保存进度，loadedmetadata 后恢复播放位置，seeking 时暂停保存，ended 后清除记录。
HTML5 的 <video> 标签本身不内置断点续播和历史进度记忆功能，需要结合 JavaScript 操作 currentTime 属性，并配合本地存储（如 localStorage）来实现。核心逻辑是：视频播放时持续记录进度，暂停/离开页面前保存，再次打开时读取并跳转到上次位置。
监听播放进度并实时保存
为避免只在暂停时保存导致进度丢失（比如用户突然关闭页面），建议使用 timeupdate 事件配合防抖策略保存进度：
- 给
<video>绑定timeupdate事件，每 3–5 秒触发一次保存（避免高频写入 localStorage） - 使用
setTimeout+clearTimeout实现简易防抖：每次触发先清除旧定时器，延迟执行保存 - 保存时以视频的
src或自定义 ID（如data-video-id）为 key，值为currentTime
页面加载时自动恢复播放位置
在 DOMContentLoaded 或 video 的 loadedmetadata 事件后读取历史进度，并设置 currentTime：
- 优先监听
loadedmetadata，确保元数据加载完成后再设置时间，避免设置失败或跳转无效 - 从
localStorage中读取对应视频的保存时间，若存在且小于视频总时长（duration），则赋值给currentTime - 可选：设置
preload="metadata"加速元数据加载，提升恢复体验
处理用户主动操作与边界情况
需兼顾用户体验与逻辑健壮性：
立即学习“前端免费学习笔记（深入）”；
- 用户拖拽进度条（
seeking事件）或点击播放按钮时，应暂停自动保存逻辑，避免覆盖用户主动选择的位置 - 视频播放结束（
ended）后，建议清空该视频的记录，避免下次误跳到片尾 - 跨设备/浏览器无共享 localStorage，如需多端同步，需接入后端接口 + 用户登录态
- 注意 Safari 在非用户手势触发下禁止自动播放带声音的视频，恢复进度后若需自动播放，应配合
muted和autoplay
简单代码示例（关键片段）
假设视频元素为：
<video id="myVideo" data-video-id="movie_123" controls preload="metadata"><source src="demo.mp4"></video>
JavaScript 部分示意：
-
恢复进度：
video.addEventListener('loadedmetadata', () => { const saved = localStorage.getItem('video_progress_movie_123'); if (saved && saved -
保存进度（防抖）：用
let saveTimer缓存定时器 ID，timeupdate中clearTimeout(saveTimer); saveTimer = setTimeout(() => localStorage.setItem(...), 3000); -
清理结束记录：
video.addEventListener('ended', () => localStorage.removeItem('video_progress_movie_123'));
