多端看课进度怎么同步才不打架:断点续播、进度合并与冲突处理

简介: 用户在手机、电脑、平板间切换看课时,学习进度常出现断点不准、进度回退、多端互相覆盖等问题。本文把进度同步拆成上报、合并、冲突三件事:用时间加事件双触发节流上报并在离开页面前补报,用取最远位置的归并规则替代按到达时间覆盖,再单独处理拖动复习、跳章和离线补传三类冲突,最后给出工程落地与上线自检清单。

用户在手机上看课看到第 12 分钟,回到家打开电脑网页版,期望视频直接从第 12 分钟继续;可现实经常是:电脑还停在开头,或者进度条莫名其妙回退,甚至两端互相覆盖,刚看完的章节又变成"未学"。学习进度同步看似是个小功能,真正要做到"多端一致、弱网不丢、断点准确",需要把上报、合并、冲突三件事拆开设计。

一、先想清楚:进度数据的本质是什么

一条学习进度至少要回答四个问题:哪个用户、哪节课、看到了多少秒、这次上报发生在什么时候。最小数据模型:

CREATE TABLE learn_progress (
  user_id    BIGINT NOT NULL,
  lesson_id  BIGINT NOT NULL,
  position   INT NOT NULL,        -- 已观看位置,单位秒
  duration   INT NOT NULL,        -- 视频总时长,用于算完成度
  finished   TINYINT NOT NULL DEFAULT 0,
  updated_at BIGINT NOT NULL,     -- 客户端事件时间戳(毫秒)
  server_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (user_id, lesson_id)
);

这里有个关键区分:updated_at 是客户端产生事件的时间,server_at 是服务器收到的时间。弱网下用户在地铁里看的进度可能延迟几十秒才上报,判断"哪条更新"时要看事件时间而不是到达顺序,否则旧进度后到会覆盖新进度。

二、断点续播:进度上报要"节流"而不是"每帧上报"

视频每秒都有播放回调,如果每个回调都写一次数据库,写量会被放大几十倍;但如果只在暂停或退出时上报,用户直接杀进程就会丢一大段进度。合理的上报策略是"时间 + 事件"双触发:

let lastReport = 0;
player.on('timeupdate', ({
    currentTime }) => {
   
  const now = Date.now();
  // 每 5 秒上报一次,避免写放大
  if (now - lastReport >= 5000) {
   
    lastReport = now;
    reportProgress(currentTime);
  }
});
// 暂停、切后台、离开页面前补报一次,保证断点尽量新
['pause', 'beforeunload', 'visibilitychange'].forEach(ev =>
  player.on(ev, () => reportProgress(player.currentTime))
);

beforeunload 里发请求要用 navigator.sendBeacon,普通 ajax 在页面卸载时可能发不出去。断点续播时,进入播放页先拉一次服务端进度,seek 到对应位置即可;为避免每次拖动都被拉回,可以只在"本地无进度或本地进度明显落后"时才 seek。

三、多端进度合并:取"最远位置"而不是"最后上报"

同一节课用户可能在手机、电脑、平板间切换,多端各自上报进度,服务端该信谁?对"已观看位置"这种单调不减的数据,正确的合并规则是取最大有效位置,而不是按上报到达时间覆盖:

-- 只有新进度比当前更远才更新,天然抵御旧消息乱序到达
UPDATE learn_progress
SET position = CASE WHEN ? > position THEN ? ELSE position END,
    finished = finished OR ?,
    updated_at = GREATEST(updated_at, ?)
WHERE user_id = ? AND lesson_id = ?;

这样即使一台旧设备延迟上报了一个较小的位置,也不会把进度往回拉。要注意"最远"必须有上界:位置不能超过视频总时长,客户端传上来的值要先和 duration 校验,过滤掉拖动条甩到末尾、脏数据导致的虚假完成。

四、冲突处理:这几类情况要单独对待

不是所有冲突都能简单取最大值,有三种边界要专门处理:

  1. 用户手动拖回复习:用户故意把进度拖回第 3 分钟重看,此时不应被"最大位置"顶回去。区分"自然播放位置"和"拖动目标",复习拖动只影响本地播放头,不上报为更小的学习进度即可。
  2. 换课/跳章:上报必须带 lesson_id,章节切换时先结算上一节、再初始化下一节,避免 A 课进度写到 B 课。
  3. 离线观看后联网同步:离线期间产生的多条进度,客户端按事件时间排队,联网后批量上报;服务端逐条用上面的"取最远"规则归并,最终收敛到离线期间到达的最远位置。

完成度判定建议由服务端统一计算(如 position/duration ≥ 0.95 记为完成),不要各端各算一套,否则同一节课在不同端"已学/未学"状态不一致。

五、踩坑清单

  • 每帧上报进度,数据库写量放大数十倍;
  • 只在退出时上报,杀进程、断网导致进度丢失;
  • 按服务器到达时间覆盖,弱网旧进度把新进度冲掉;
  • 进度不设上界,脏数据直接标记"已学完";
  • beforeunload 用普通 ajax,卸载时请求发不出去;
  • 完成度各端各算,章节状态对不上。

六、工程落地建议

落地时先把"进度单调不减、按事件时间归并、服务端统一判完成"这三条主规则定下来,再处理节流上报和离线补传;上报接口设计成幂等的(同一用户+课程+位置重复上报无副作用),方便客户端放心重试。成型的在线教育平台一般已内置多端进度同步、断点续播与章节完成判定(如基于成型平台的课程学习能力,如乔拓云教育系统),自研时重点保证多端合并规则与弱网补传的正确性。

七、上线自检清单

  1. 手机看到一半换电脑,是否能从断点附近续播;
  2. 弱网下进度延迟上报,是否不会把进度往回拉;
  3. 直接杀进程,最多丢失多少秒进度;
  4. 拖动复习是否不会错误覆盖真实学习进度;
  5. 同一节课在各端的"已学/未学"是否一致。

多端进度同步的核心,是认清"已看位置只增不减"这一业务特性,用取最远的归并规则替代简单的时间覆盖,再用节流和补传兜住弱网体验。以上为个人实践总结,具体方案请结合播放器与业务场景调整。

相关文章
|
3月前
|
人工智能 数据可视化 开发工具
Qoder CN的RepoWiki是什么?能自动生成项目文档吗?
RepoWiki 是阿里云 Qoder CN 的智能项目知识生成工具,可自动分析 Git 代码库,生成带溯源(含行号)的结构化文档;支持交互式规划、进度可视化、双向同步及多格式导出。按任务复杂度消耗 Credits,个人版首注赠300点。阿里云Qoder CN官网:https://t.aliyun.com/U/hGZKNX
|
7天前
|
机器学习/深度学习 存储 人工智能
通义千问Qwen3.8-Flash深度拆解:GDN与QSA混合注意力机制解析及企业落地指南
Qwen3.8-Flash不是实验室里的炫技之作,而是一把真正为企业级场景淬炼的利刃。它以MoE稀疏架构实现"大能力、小开销",以GDN+QSA混合注意力劈开长文本算力壁垒,以多模态原生支持打通图文视频的认知边界。无论你是想批量处理合同文档的法务团队,还是需要代码自动化重构的研发部门,亦或是搭建高并发智能体的创业公司,它都能以极具竞争力的成本,撑起真实业务的脊梁。 从模型体验到API接入,从应用编排到智能体搭建,从免费额度到灵活计费,‌阿里云百炼大模型服务平台页面 ‌提供了从入门到生产的全链路支撑。现在就登录百炼控制台,领取你的免费Token额度,让Qwen3.8-Flash成为你AI业务落
64 2
|
18天前
|
弹性计算 Linux 网络安全
阿里云服务器怎么买?零经验用户从选购到配置的完整实操教程‌
阿里云ECS云服务器是你踏入云计算世界的第一步。从这里开始,你可以搭建网站、部署应用、学习运维、探索更多可能。希望这篇教程能帮助每一位新手小白顺利拥有属于自己的第一台阿里云ECS云服务器,开启你的云端之旅!
123 4
|
26天前
|
搜索推荐 算法 前端开发
SpringBoot+Vue 管理系统毕业设计|软件工程毕设开发实战
本系统基于SpringBoot+Vue开发,实现自习室预约管理,支持座位预约、签到、违规监管与数据看板。创新点在于引入协同过滤算法,根据用户历史行为智能推荐座位(如常去楼层、时段、座位类型),提升资源利用率。含完整数据库设计、核心代码及测试方案,适合作为计算机/软件工程专业本科毕设。(239字)
|
2月前
|
人工智能 缓存 API
保姆级通义千问Qwen大模型选型教程:Qwen3.8‑Max、Qwen3.7‑Max、Qwen3.7‑Plus、Qwen3.7‑Flash功能区别与选型指南,API代码实操
在AI应用开发、智能体搭建、代码工程落地、文档解析等场景中,模型选型直接决定项目效果、响应速度与调用成本。很多开发者初次接触Qwen系列模型时,很容易混淆Qwen3.8‑Max、Qwen3.7‑Max、Qwen3.7‑Plus、Qwen3.7‑Flash之间的定位差异,单纯依靠模型名称判断能力,出现选用高成本模型做简单任务造成预算浪费,或是选用轻量模型处理复杂推理任务,导致结果质量不达预期的情况。四款模型虽然都具备百万级上下文窗口,支持工具调用、结构化输出、思考模式,但在模态支持、推理深度、多模态能力、响应速度、单位Token定价上有着明确的区分。本文将逐一拆解四款模型的核心功能、能力边界、优
827 0
|
2月前
|
缓存 移动开发 监控
商城商品与订单管理技术实战:SKU模型、库存同步与订单状态流转
本文从技术角度拆解商城系统的三块核心设计:SPU+SKU数据模型、库存同步防超卖方案与订单状态机流转,并给出幂等与对账的落地要点,适合商城类产品开发者参考。
|
2月前
|
存储 小程序 前端开发
小程序表单与会员体系搭建实战:信息收集、权限控制与数据管理
本文拆解小程序表单与会员体系的技术实现:字段设计、校验防刷、会员分级模型与数据权限管理,并给出中小团队的低成本落地路径。
|
3月前
|
人工智能 调度 数据安全/隐私保护
Stable Diffusion+ComfyUI+OpenClaw AI漫剧量产提示词工程:结构化Prompt、负面词脱敏、权重锁定防画面崩坏全方案
AI漫剧批量渲染常遇画面崩坏、人设漂移、画风割裂等问题,主因是Prompt不规范。本文提供量产级正向/负面Prompt词库、五级分层权重标准、自动清洗规则及SD+ComfyUI+OpenClaw三端协同方案,助你一键实现稳定高效、风格统一的工业化量产。(239字)
|
9月前
|
机器学习/深度学习 PyTorch 算法框架/工具
PyTorch 入门指南:深度学习的瑞士军刀
PyTorch 是Meta开源的动态深度学习框架,以灵活的计算图、类NumPy的直观API和强大GPU加速著称。支持快速原型设计与生产部署,涵盖张量运算、自动求导、神经网络构建等核心功能,是研究与工程首选工具。(239字)
|
存储 人工智能 缓存
全新「宜搭出海版」,跨境业务一搭搞定!
在全球化竞争中,中国出海企业面临高增长与抗风险的双重挑战。宜搭基于低代码平台推出「宜搭出海版」,专注解决跨境业务的核心痛点。提供15种语言+AI翻译、全球文件速传、国际化时区协同、全球地址定位、国际化邮箱、货币支持及离线能力等功能,助力企业实现高效、敏捷的全球业务拓展。版本包括面向中国出海企业的“宜搭出海版”和面向海外客户的“宜搭国际版”。
1204 17