HTML5媒体播放器断点续播与历史记录可通过原生JS+localStorage实现：监听timeupdate事件防抖存进度，beforeunload兜底保存；加载时读取并设置currentTime（需等待loadedmetadata）；历史记录用数组维护最近10条元数据。
HTML5 媒体播放器实现断点续播和播放历史记录，核心在于监听播放进度、持久化存储关键数据，并在页面加载时恢复状态。不需要依赖第三方框架，纯原生 JavaScript + localStorage 即可完成。
监听播放进度并自动保存断点
利用 timeupdate 事件实时捕获当前播放时间，配合防抖（避免频繁写入）和页面卸载前兜底保存，确保断点不丢失：
- 为
<video></video>或<audio></audio>元素绑定timeupdate事件，每 5–10 秒存一次当前currentTime - 同时监听
beforeunload，触发时立即保存最后一次已知进度，防止用户突然关闭页面导致丢失 - 用媒体资源的唯一标识（如 URL 或自定义 ID）作为 localStorage 的 key，避免不同视频间数据混淆
页面加载时恢复播放位置
在 DOM 加载完成后（如 DOMContentLoaded），读取对应资源的保存进度，并调用 play() 前设置 currentTime：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先检查
localStorage中是否存在该资源的断点时间戳 - 若存在且小于资源总时长（
duration），赋值给currentTime；注意需等待loadedmetadata事件后才可安全设置，否则可能无效 - 可选：自动播放（需用户交互后才允许，遵守浏览器 autoplay 策略）或显示“继续观看”提示按钮
维护播放历史记录列表
历史记录本质是按时间顺序存储的资源元数据数组，每次播放完成或用户主动标记“已看”，就更新列表：
立即学习“前端免费学习笔记（深入）”；
- 每次开始播放一个新资源时，将其标题、URL、封面、最后播放时间等信息整理成对象
- 用
Array.prototype.unshift()插入开头，并用splice(0, 10)限制最多保存最近 10 条，避免 localStorage 超限 - 支持手动清除某条记录或清空全部，通过
localStorage.removeItem()或重置数组后写回
注意事项与兼容性提醒
部分行为受浏览器策略影响，需提前处理：
- iOS Safari 对
autoplay和后台音频播放限制严格，currentTime设置可能失败，建议加try...catch并降级为手动播放提示 - 隐私模式下部分浏览器禁用 localStorage，需检测写入是否成功（例如存后立即读取比对）
- 视频源切换（如 HLS、MP4 不同格式）可能导致
duration初始为NaN，应监听loadedmetadata再恢复进度
