使用 localstorage 实现视频断点续播，核心是监听页面播放状态并在合适时机保存/恢复进度：在 loadedmetadata 事件中读取并设置 currenttime；通过节流的 timeupdate、pause、ended 及 beforeunload 事件保存进度，避免频繁写入与精度误差，并为每个视频分配唯一 storagekey。
使用 localStorage 实现视频断点续播，核心是监听播放进度并在页面卸载或暂停时保存当前时间，重新进入时读取并跳转到该时间点。关键在于时机控制和兼容性处理，避免频繁写入、时间精度误差以及自动播放策略限制。
监听页面播放状态并保存进度
在 video 元素上监听 timeupdate 事件（每秒触发数次），但不要每次都写入 localStorage——这样会降低性能。推荐采用“节流”策略：仅当播放时间变化超过 1 秒，或用户主动暂停/离开页面时才保存。
- 用
setTimeout延迟保存，比如每 3 秒记录一次最新播放时间 - 同时监听
pause和ended事件，确保暂停或播完时立即落盘 - 为每个视频分配唯一 key（如视频 URL 或 data-id 属性），避免不同视频互相覆盖
页面加载时恢复播放位置
在 DOM 加载完成（DOMContentLoaded）或 video 元素就绪后，读取对应 key 的保存时间，并调用 video.currentTime = savedTime。注意：不能在 load 事件前设置 currentTime，否则可能因视频未加载元数据而失败。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 建议在
video的loadedmetadata事件中执行恢复逻辑 - 恢复后可选地自动播放（需用户交互后才允许，否则现代浏览器会静音拦截）
- 若保存时间超出视频总时长（如视频被替换），应忽略或重置
处理页面关闭/切换场景
用户关闭标签页、刷新或切到其他页面时，需要及时保存最后进度。利用 beforeunload 事件是最可靠的方式——它在页面卸载前同步触发，能确保 localStorage 写入完成。
-
beforeunload中直接调用localStorage.setItem()是安全的 - 避免在此事件中做异步操作（如 fetch），它们大概率不会执行完毕
- 可结合
visibilitychange事件监听页面是否被最小化或切换，作为补充保存时机
完整示例代码片段
以下为精简可用的核心逻辑（无需框架）：
<video id="myVideo" controls><source src="example.mp4" type="video/mp4"></source></video><script>
const video = document.getElementById('myVideo');
const storageKey = 'video_progress_' + new URL(video.src).pathname;
// 恢复进度
video.addEventListener('loadedmetadata', () => {
const savedTime = localStorage.getItem(storageKey);
if (savedTime && !isNaN(savedTime)) {
video.currentTime = parseFloat(savedTime);
}
});
// 保存进度（节流）
let saveTimer;
const saveProgress = () => {
clearTimeout(saveTimer);
saveTimer = setTimeout(() => {
localStorage.setItem(storageKey, video.currentTime.toString());
}, 3000);
};
video.addEventListener('timeupdate', saveProgress);
video.addEventListener('pause', saveProgress);
video.addEventListener('ended', () => {
localStorage.removeItem(storageKey);
});
// 页面卸载前强制保存
window.addEventListener('beforeunload', () => {
localStorage.setItem(storageKey, video.currentTime.toString());
});
</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
