蘑菇视频官网后台播放时播放进度如果只能做一件事：先改这里

蘑菇视频432026-04-06 00:10:02

在视频平台里，播放进度看似简单，却直接影响用户体验、断点续播和数据统计。很多平台把“保存进度”的逻辑放在 pause、unload 或定时器里，结果出现进度丢失、不精确、跨终端同步差等问题。如果只能改一件事，先把“进度上报的触发点”改成：基于 video.currentTime 的节流上报，并使用可靠的传输（navigator.sendBeacon / fetch keepalive）将进度实时持久化到服务端。

为什么这一改动最有效

覆盖所有常见场景：播放、快进、卡顿、切换标签页、临时断网等，能及时把真实进度写到后台。
提高精度：相比只在 pause 或 unload 时上报，timeupdate+节流可以记录用户的真实观看位置（尤其是中途 seek）。
减少丢包：sendBeacon / fetch keepalive 在页面卸载时更可靠，配合本地缓存可保证断网后重试。

具体实现要点（前端） 1) 在 video 元素上监听 timeupdate、seeking、pause、visibilitychange、beforeunload、online 事件。 2) 用节流（throttle）控制上报频率，避免频繁请求。建议上报间隔 5–15 秒，seek 事件应立即上报当前时间。 3) 上报使用 navigator.sendBeacon 优先，其次使用 fetch(…, { keepalive: true })，再次回退到普通 fetch 并在失败时缓存到 localStorage。 4) 每次上报带上用户 id、视频 id、currentTime、duration、客户端时间戳与设备 id（用于多端冲突解决）。

前端示例（核心片段） function throttle(fn, wait) { let last = 0; return function(…args) { const now = Date.now(); if (now - last >= wait) { last = now; fn.apply(this, args); } }; }

const throttledReport = throttle(() => { sendProgress({ userId, videoId, currentTime: video.currentTime, duration: video.duration, ts: Date.now() }); }, 10000); // 10s 间隔

video.addEventListener('timeupdate', throttledReport); video.addEventListener('seeking', () => { sendProgress({ userId, videoId, currentTime: video.currentTime, duration: video.duration, ts: Date.now() }); }); window.addEventListener('beforeunload', () => { sendProgress({ userId, videoId, currentTime: video.currentTime, duration: video.duration, ts: Date.now() }); }); window.addEventListener('visibilitychange', () => { if (document.hidden) sendProgress({ userId, videoId, currentTime: video.currentTime, duration: video.duration, ts: Date.now() }); }); window.addEventListener('online', () => { // 尝试发送缓存的进度 });

后端保存策略（关键点）

接口接收：userId, videoId, currentTime, duration, ts, deviceId。
使用插入/更新（upsert）模式，记录最后一次上报时间与进度。保存时按时间戳判定最新数据，避免旧设备覆盖新数据。
保留历史（可选）：为数据分析保留每隔 N 分钟的一条记录，用于观看行为分析。
提供续播接口：前端加载视频时先调用 /api/video/progress/latest 返回 lastTime，前端在 metadataloaded 后设置 video.currentTime = lastTime（并处理 near-end 问题，比如接近 duration 的跳到结尾或重置到 0）。

处理细节与优化