HTML5视频断点续播可通过监听timeupdate事件（节流至5–10秒）并用localStorage/sessionStorage存储currentTime实现；页面加载时在loadedmetadata后读取并设置currentTime，配合play()恢复播放，需处理duration未就绪、移动端自动播放限制及直播流不支持等边界情况。
要在HTML5网页中实现视频播放进度的断点续播，核心是记录用户离开时的播放位置，并在下次加载时自动跳转到该位置继续播放。这不依赖服务器，纯前端即可完成，关键在于合理使用video元素事件和浏览器存储机制。
监听播放进度并持久化保存
利用timeupdate事件周期性获取当前播放时间（建议节流至每5–10秒一次），结合localStorage或sessionStorage存储时间戳：
- 用
localStorage可跨会话保留（适合“下次打开继续看”） - 用
sessionStorage仅限当前标签页（适合临时中断场景） - 建议加上视频URL或ID作为key前缀，避免多个视频互相覆盖，例如：
video_resume_https://xxx.mp4
页面加载时自动恢复播放位置
在video元素加载完成（loadedmetadata事件后）或DOMContentLoaded阶段读取存储的时间值，并调用currentTime设置播放起点：
- 需先判断
video.readyState >= 1再设置currentTime，否则可能无效 - 设置后可主动调用
play()（注意：现代浏览器通常要求用户手势触发播放，自动播放受限；若已获用户交互授权则可行） - 若恢复时间超出视频总时长（如元数据未加载完导致
duration为0或NaN），应忽略或重置
处理退出与清理时机
除了定时保存，还需响应明确的退出动作，提升准确性：
- 监听页面卸载事件（
beforeunload或pagehide），立即保存最后一次currentTime - 监听
ended事件，播放完成后清除对应存储项，避免下次误恢复 - 用户点击“重新开始”或“清除进度”时，主动删除对应localStorage项
兼容性与边界情况注意
实际落地需考虑几个常见坑点：
- MP4等本地文件在file://协议下可能因CORS限制无法读取
duration，影响恢复逻辑，建议部署在HTTP/HTTPS服务上 - 移动端Safari对
autoplay和play()限制更严，恢复播放位置后一般不能自动播放，需引导用户点击一次 - 直播流（HLS/DASH）通常不支持
currentTime随意跳转，断点续播仅适用于点播视频（MP4/WebM）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
