想省心？蘑菇短视频的播放进度按这三步来，基本稳了

想省心？蘑菇短视频的播放进度按这三步来，基本稳了

短视频用户期待的是“点开就接着看”的无缝体验。要把蘑菇短视频的播放进度做到稳、准、同步，不靠运气靠方法。下面给出三步实战方案，既适合前端快速落地，也能扩展到服务端和多设备同步。

一步：可靠地捕捉并保存进度（前端优先）

• 触发点要选对：用 HTML5 video 的 timeupdate、pause、ended 事件为主，配合 visibilitychange（切到后台）与 beforeunload（关页/刷新）补漏。timeupdate 不要每帧都存，节流（throttle）到 2–5 秒一次即可，能平衡精度与写频率。
• 本地优先：把进度先写到 localStorage 或 IndexedDB（后者在大规模或离线场景更可靠），写入内容建议包含 videoId、currentTime、duration、版本号（videoVersion 或文件 hash）与保存时间。
• 可选同步：如果用户已登录，同时发一个轻量 POST 到后端，便于跨设备恢复。为节省带宽，服务端接口只接受必要字段并返回最新已保存时间戳。
• 代码示例（思路）：
• 在播放器上节流写 localStorage： const key = progress_${videoId}; const saveProgress = () => { const payload = { videoId, time: video.currentTime, duration: video.duration, version }; localStorage.setItem(key, JSON.stringify(payload)); if (isLoggedIn) sendToServer(payload); }; // timeupdate 节流到 3 秒 video.addEventListener('timeupdate', throttle(saveProgress, 3000)); ['pause','ended','visibilitychange','beforeunload'].forEach(evt => video.addEventListener(evt, saveProgress));
• 小贴士：只存百分比有时不够，优先存 timestamp（秒）与 duration，可判断版本或片段差异。若进度距离视频尾部 < 5s，可视作已看完，避免误触发“继续观看”场景。

二步：优雅恢复并处理版本/片段差异（恢复策略）

• 恢复流程要有“兜底”与“确认”：页面加载时先从 localStorage/IndexedDB 获取本地进度，再向服务端拉取云端进度。对比后选择最新且合规的记录（例如时间更新更近、版本一致）。
• 处理版本差异：如果视频文件更新或裁剪（duration 变化或 version 不同），不要直接把旧的 seconds 赋值给播放器。判断策略：
• 若版本一致，直接跳到 savedTime。
• 若版本不同但 duration 变化小于某阈值（比如 < 5%），按比例转换时间。
• 若差距大或找不到对应片段，提示用户“发现新版本，是否从头/从上次接续处播放”。
• UX 友好：在播放器上显式展示“继续观看”卡片（例如“继续观看：00:32 / 共03:20”），不要在没有确认的情况下强制跳转。用户体验好，流失率低。
• 示例恢复逻辑（伪代码）： const candidate = chooseLatest(localRecord, serverRecord); if (candidate && candidate.version === currentVideoVersion) { player.currentTime = candidate.time; } else if (candidate && canRemap(candidate.duration, currentDuration)) { player.currentTime = remapTime(candidate.time, candidate.duration, currentDuration); } else { // 不自动跳转，显示“继续观看”提示 }

三步：网络与同步稳固策略（容错与跨设备）

• 离线/网络波动处理：先把进度写入本地队列（IndexedDB）。当检测到网络恢复（navigator.onLine 或 service worker background sync）时把队列中的进度批量同步到服务器。采用幂等接口（以 videoId+timestamp 为 key）避免重复写入混乱。
• 重试与退路：对于发送失败采用指数退避重试，短时间内失败也不要阻塞用户体验；同时保持本地记录，保证不会丢失进度。
• 跨设备同步策略：使用最后修改时间（lastUpdated）或版本号来决定数据优先级；在服务端把每条进度标记来源设备，供客户端做更细致的合并策略（例如优先最近活跃设备）。
• 隐私与存储限制：在通知或设置里允许用户选择是否同步到云端，说明保存时长（比如 30 天无活动则清除）。注意浏览器隐私模式下 localStorage/IndexedDB 可用性不同，需降级处理。
• 增强体验的加分项：
• 在播放列表/推荐位中显示“继续观看”短卡，增加留存；
• 将进度与观看行为（是否跳过片段）做轻量埋点，优化内容分发；
• 使用服务端合并策略把“观看完成”标识同步回推荐系统，帮助准确推荐。

怎么落地最省心

• 若要最快上线：先做“前端本地保存 + 登录时上报”的方案，保证断网/刷新情况下用户体验最稳。接着在后台实现简单的合并接口和跨设备同步（按最后更新时间选取）。
• 若要长期稳定：补上 IndexedDB 离线队列、service worker background sync、以及版本比对逻辑，处理多设备和视频迭代场景。
• 我可以按你当前的技术栈（纯前端/前后端/移动端）给出更具体的代码模板与接口设计，帮你把“继续观看”从想法变成可复用的模块。

按这三步来：捕捉并保存、稳妥恢复、网络与同步加固，蘑菇短视频的播放进度体验就能做到既省心又可靠。需要我把前端代码或后端接口示例整理成可直接复制粘贴的模板吗？