我忍了三天，蘑菇短视频的播放进度我试了三种方案，最后选了这一种

我忍了三天，蘑菇短视频的播放进度我试了三种方案，最后选了这一种

三天里反复看着用户反馈、调试日志和真实用户会话录像，我把蘑菇短视频的播放进度问题拆成了三个维度：精准度（能否准确恢复到用户上次看到的位置）、鲁棒性（在网络波动、切换设备、后台/前台切换时的表现）和开发/维护成本。按照这三个维度分别试了三套方案，试完才敢下结论——选了能在用户体验和工程成本之间取得最好平衡的那一套。

先说问题：用户在看了一半就离开，回来后希望继续从上次位置播放，但进度不准、恢复延迟、跨设备不能同步或直接丢失，这些都导致了用户的二次播放阻力。理想的方案需要在客户端及时保存进度，同时能在必要时将进度同步到服务器支持跨设备恢复，而且不让后端压力暴涨。

我试过的三种方案和它们的得失：

方案一：前端本地存储为主（localStorage/sessionStorage）

• 做法：在 video 的 timeupdate 事件中周期性把 currentTime 写入 localStorage，以 videoId 为 key。
• 优点：实现简单、响应快、离线也行（用户关机再打开能恢复）。
• 缺点：跨设备无法同步；当用户清理浏览器缓存或使用隐身模式时失效；storage 写得太频繁会影响性能或触发浏览器限额。
• 适用场景：单设备短时恢复、对跨设备不关心的产品。

方案二：后端实时同步为主（心跳 + 每次关键事件写入后端）

• 做法：客户端每隔 N 秒发送 progress 心跳（例如每 10 秒），在 pause/visibilitychange/ended 等关键事件上强制同步；后端保存到用户会话或数据库，用于跨设备同步。
• 优点：支持跨设备恢复、持久可靠；便于统计和分析用户行为。
• 缺点：后端负载和存储压力明显上升；网络不好时同步失败导致体验不稳定；实现和维护成本高。
• 适用场景：需要严格统计、跨设备体验至关重要的产品。

方案三：混合方案（最终选择）

• 做法概述：以前端本地存储为主做实时保存，结合定期或关键事件时向后端同步。加入节流/防抖、差异检测和恢复策略，处理跨设备冲突与隐私控制。
• 关键点：
• 本地优先：timeupdate 节流（如每 5 秒）写 localStorage，避免频繁写入。
• 后端同步策略：每 30~60 秒发一次同步心跳，或在 pause、visibilitychange、seek、beforeunload 时立即同步。
• 冲突解决：后端保存最近的 progress + timestamp；当用户在新设备上打开时，展示“从上次 XX 继续播放 / 从头播放”的选择界面，默认用更近期的 timestamp。
• 网络/隐私降级：同步失败时仍依赖本地缓存；提供开关让用户控制是否开启云端同步（符合数据合规的前提下）。
• 存储优化：只保存必要字段（videoId、currentTime、duration、timestamp、deviceId），定期清理过期记录。
• 优点：保留了本地恢复的即时性，同时支持跨设备的语义恢复；后端压力可控；用户体验最好。
• 缺点：实现较方案一复杂，需要处理同步冲突和边界情况。

我为什么最终选混合方案（方案三）

• 用户体验优先但不盲目增加系统复杂度。用户最反感的是“进度不准”和“恢复失败”，而纯后端同步在网络差或后端延迟时仍会造成体验问题。混合方案保证了在本地能即时恢复，同时在条件允许时再把进度同步到服务器，跨设备需求也得到满足。
• 工程成本与运营成本平衡。通过节流和关键事件触发减少请求频率，后端存储量和写入频率被控制在可接受范围，便于横向扩展。
• 可控的隐私与合规实现。提供用户控制开关和合理的数据保留策略，既符合合规要求也避免了不必要的数据积累。

实现细节（落地建议）

• 事件捕捉：监听 loadedmetadata、timeupdate（节流，比如每 5s）、pause、seeked、visibilitychange、beforeunload、ended。
• 本地保存格式（示例）：{ videoId, currentTime, duration, timestamp, deviceId }
• 同步策略：timeupdate 本地写入；每 30-60s 发一次心跳（如果 currentTime 有变化）；在 pause/visibilitychange/seeked/beforeunload 时强制同步。
• 恢复逻辑：打开视频时先读取后端 progress（若用户已登录并开启云同步），再读取 localStorage，按时间戳和设备优先级判断是否展示“继续播放”提示。
• UX 细节：在播放列表缩略图上显示“已看到 XX%/剩余 XX”能提高转化；弹窗提示“上次在 XX 秒，是否从此处继续？”给用户控制权。
• 容错处理：后端同步失败应安静降级，一旦恢复网络再重试；对匿名用户用本地恢复，对已登录用户优先云端但尊重用户设置。

数据与监控

• 建议跟踪：恢复率（用户打开视频并选择继续比例）、平均恢复时间差、同步失败率、因进度问题的用户投诉数。
• A/B 测试：可以先对一部分用户启用云端同步与“继续播放”提示，观察活跃度和二次播放率变化，再逐步推广。

最后一句话 三天的反复试验让我确认，用户体验的细节并不都在“更复杂的系统”，而在“恰到好处的工程策略”。蘑菇短视频现在用的就是那套折中的混合方案：用户既能迅速恢复播放，又能在需要时跨设备继续，工程上又不至于把后端推垮。若你想要我把关键代码片段或接口设计写出来，我可以继续把实现细节写成开发-ready 的文档。

标签： 我忍 三天 蘑菇