摘要深度解析国内在线教育平台三分屏课件两种主流技术架构拆解前端多流渲染、时间元数据同步机制分析各大网课平台三分屏数据流逆向底层逻辑对比 filter_complex 与分段 concat 两种合成方案给出可运行 PythonFFmpeg 本地合成演示代码面向音视频、流媒体开发人员学习研究。标签音视频ffmpegpythonHLSm3u8三分屏课件流媒体逆向分析目录什么是三分屏课件在线教育主流多媒体形态三分屏课件两套底层技术架构Mermaid 架构示意图国内主流网课平台三分屏数据流底层拆解核心难点时间轴同步机制浏览器端如何实现 PPT 与讲课视频对齐离线合成两大技术方案对比filter_complex VS 分段 concatPython 工程实现基于分段 concat 的三分屏合成完整 Demo优化版FFmpeg 关键命令详解逆向与开发高频踩坑清单FAQ 常见问题解答技术总结与延伸阅读1、什么是三分屏课件在线教育主流多媒体形态三分屏课件广泛应用在高校慕课、公考考研、职业 IT 培训、企业直播回放场景。浏览器页面划分三大区域主讲视频区教师摄像头人像画面讲义 / PPT 展示区幻灯片、板书、屏幕共享画面大纲导航区课程章节目录点击目录直接跳转到视频对应播放时间点。绝大多数开发者的认知误区网页播放看到的完整三分屏服务器端并不是一个预合成 MP4 文件。 绝大多数平台采用客户端多资源协同渲染模式CDN 分别存放讲师视频、PPT 素材、时间同步 JSON 元数据浏览器 JS 播放器在前端实时完成画面同步拼接服务端只分发原始多路素材不输出合并成品视频。这就解释一个现象很多开发者直接下载 m3u8 主讲视频拿到文件只有老师人像丢失全部 PPT 讲义画面。2、三分屏课件两套底层技术架构Mermaid 架构示意图国内平台分化为前端客户端合成模式 A、服务端预合成模式 B两套实现。flowchart LR subgraph 模式A前端实时合成绝大多数平台 A1[主讲HLS/m3u8视频流] -- Player[浏览器JS播放器] A2[PPT素材图片/PDF/副视频流] -- Player A3[时间轴JSON元数据slideList] -- Player Player -- Render[浏览器前端渲染输出三分屏画面] end subgraph 模式B服务端预合成老旧平台 B1[服务端转码服务] -- B2[完整三分屏m3u8/MP4] B2 -- Browser[浏览器直接播放单一视频] end模式 A前端客户端合成主流存储讲师视频、PPT 素材、时间元数据三者完全独立存储 CDN播放逻辑播放器监听currentTime播放时间读取slideList时间戳动态切换 PPT 画面优点CDN 分发成本低用户可自由隐藏摄像头画面支持倍速、拖拽跳转缺点离线导出难度大必须同时拿到视频、PPT 素材、时间元数据三份资源。代表平台CCtalk、伯索云、爱问云、中公、橙啦、百家云、超格、粉笔、小猿优课、猿辅导素养课、部分职业教育回放。模式 B服务端预合成老旧存量系统存储服务端提前把人像、PPT、目录渲染合并输出单一完整视频流优点离线简单直接下载单路视频即可获取完整三分屏缺点转码服务器开销巨大文件体积膨胀无法单独隐藏某一路画面。代表平台老版本智慧树、早期高校录播系统。✅快速区分技巧抓包浏览器网络请求如果除主视频之外大量返回图片、JSON 时间线属于模式 A只有一路 m3u8 流没有额外图片 /json属于模式 B。3、国内主流网课平台三分屏数据流底层拆解本节仅分析通用接口设计原理不给出真实域名、接口路径、抓包参数无可直接复现抓取指令。平台分类元数据获取逻辑PPT 素材形态鉴权特点典型平台高校慕课类课程详情接口内嵌slideList幻灯片数组字段startTime毫秒级时间戳图片序列、部分 HTML 动态板书需要登录选课权限才能拿到时间轴学银在线、华文慕课、雨课堂职业培训平台独立 RPC 接口返回时间元数据和视频流完全分离图片序列 / 独立屏幕共享 m3u8 副流PPT 副资源独立签名 TokenToken 过期 403CCtalk、小鹅通、高途、希望学知识付费平台元数据内嵌课节详情 JSON变体三分屏视频 文稿图片、文本文稿会话 Cookie 鉴权极客时间企业直播回放直播回放索引接口输出多路流 时间信令多路视频流摄像头、屏幕共享绑定回放会话签名ClassIn、钉钉云学堂回放逆向开发共性技术结论模式 A 三分屏完整资源三元组主讲视频 PPT 素材 slideList 时间元数据三者缺一不可所有元数据接口必须携带登录会话鉴权凭证未登录账号无法获取幻灯片切换时间轴PPT 素材存在 4 种形态静态图片、PDF、第二路 m3u8 副视频、HTML 动态板书HTML 板书无法直接导出静态图片需要无头浏览器截图渲染付费课程 HLS 分片普遍启用 AES‑128 加密EXT‑X‑KEY即使下载 TS 分片没有密钥也无法解码播放。4、核心难点时间轴同步机制浏览器端如何实现 PPT 与讲课视频对齐slideList是整个三分屏体系的核心同步中枢模拟 JSON 样例演示用模拟数据[ {startTime: 0, image: slide_0.jpg}, {startTime: 12500, image: slide_1.jpg}, {startTime: 28000, image: slide_2.jpg} ]startTime单位毫秒FFmpeg 内部时间单位为秒单位错位是合成画面 PPT 切换错位最常见 BUG。语义0‑12.5s 显示 slide_012.5‑28s 显示 slide_128s 直到视频结束显示 slide_2。浏览器播放器同步伪代码逻辑//浏览器前端播放同步逻辑示意 player.on(timeupdate, function (currentTimeSeconds) { const nowMs currentTimeSeconds * 1000; //遍历slideList找到当前时间命中的幻灯片切换DOM图片 const activeSlide slideList.findLast(item item.startTime nowMs); domSlideImg.src activeSlide.imageUrl; })浏览器端是 DOM 层面切换图片并没有修改视频二进制码流这也是离线合成必须重新做视频渲染的根本原因。5、离线合成两大技术方案对比filter_complex VS 分段 concatFFmpeg 原生不支持直接读取 JSON 时间轴自动切换画面。工程领域两套实现方案优缺点对比表格方案实现思路优点缺点适用场景filter_complex overlay 滤镜全部资源一次性送入 filter_complexbetween(t,...)控制图片显示时间段代码逻辑简单不需要生成大量临时片段幻灯片数量 50 条时滤镜字符串极度膨胀FFmpeg 性能急剧下降内存暴涨幻灯片数量少短课程分段 concat 拼接行业工具主流方案根据 slide 时间戳切割视频为多个时间片段每一段渲染对应 PPT 画面全部片段完成后 concat 拼接输出完整 MP4性能稳定内存可控幻灯片上千条也可正常运行会产生大量中间临时片段磁盘 IO 开销大真实生产环境长课时课程学无止等下载器内部采用该方案行业成熟工具内部选型优先分段 concat 方案规避 filter_complex 滤镜膨胀带来稳定性问题。6、Python 工程实现基于分段 concat 的三分屏合成完整 Demo优化版⚠️前置条件本地安装 FFmpeg 并配置环境变量输入全部为本地已经存在文件无任何网络请求逻辑。 逻辑解析 slideList 时间轴 → 按照时间点切分成若干片段 → 每个片段叠加对应 PPT 图片 → 生成 concat 列表文件 → 调用 ffmpeg‑concat 合并全部片段输出最终三分屏 MP4。import json import subprocess import os from pathlib import Path 三分屏离线合成Demo分段concat方案 纯本地文件处理无网络抓取、接口请求逻辑 布局左侧主讲人像视频720*1080右侧PPT画面1280*1080输出总分辨率2000*1080 def get_video_duration(video_path: str) - float: 调用ffprobe获取视频总时长返回秒数 cmd [ ffprobe, -v, error, -show_entries, formatduration, -of, defaultnoprint_wrappers1:nokey1, video_path ] res subprocess.run(cmd, capture_outputTrue, textTrue, encodingutf‑8) return float(res.stdout.strip()) def generate_3screen_segments(video_path: str, slide_json_path: str, tmp_dir: Path, out_final: str): tmp_dir.mkdir(exist_okTrue) with open(slide_json_path, r, encodingutf‑8) as f: slide_list json.load(f) total_dur get_video_duration(video_path) seg_list [] seg_index 0 #补充视频末尾时间节点 time_points [x[startTime] / 1000 for x in slide_list] time_points.append(total_dur) for idx in range(len(slide_list)): t_start time_points[idx] t_end time_points[idx 1] slide_item slide_list[idx] img_path slide_item[image] seg_file tmp_dir / fseg_{seg_index:03d}.mp4 seg_index 1 #单段截取[t_start, t_end]左侧主视频右侧叠加对应PPT图片 cmd [ ffmpeg, -ss, f{t_start}, -to, f{t_end}, -i, video_path, -i, img_path, -filter_complex, [0:v]scale720:1080[left];[1:v]scale1280:1080[right];[left][right]overlayx720:y0[vout], -map, [vout], -map, 0:a, -c:a, aac, -y, str(seg_file) ] print(f生成片段{seg_file}, 时间区间 {t_start:.2f} ~ {t_end:.2f}) subprocess.run(cmd, capture_outputTrue) seg_list.append(str(seg_file)) #生成concat文本清单 concat_txt tmp_dir / concat_list.txt with open(concat_txt, w, encodingutf‑8) as f: for seg in seg_list: f.write(ffile {seg}\n) #concat demuxer拼接全部片段 concat_cmd [ ffmpeg, -f, concat, -safe, 0, -i, str(concat_txt), -c, copy, -y, out_final ] print(执行concat合并全部片段……) subprocess.run(concat_cmd) print(f✅输出完成{out_final}) if __name__ __main__: generate_3screen_segments( video_path./speaker.mp4, slide_json_path./slides_timeline.json, tmp_dirPath(./tmp_segments), out_final./output_3screen_final.mp4 )配套slides_timeline.json本地模拟文件[ {startTime:0,image:./slide0.jpg}, {startTime:12000,image:./slide1.jpg}, {startTime:25000,image:./slide2.jpg} ]7、FFmpeg 关键命令详解简易测试单段三分屏本地调试快速验证效果ffmpeg -i speaker.mp4 -i slide0.jpg \ -filter_complex [0:v]scale720:1080[left];[1:v]scale1280:1080[right];[left][right]overlayx720:y0 \ -map [v] -map 0:a -c:a copy output_demo.mp4参数说明overlayx720:y0画面叠加X 坐标 720Y 坐标 0PPT 放在视频画面右侧-ss -to截取指定时间区间concat demuxer编码一致时直接流复制不需要二次重新编码速度快。8、逆向与开发高频踩坑清单只下载主讲视频忽略 slideList 时间元数据与 PPT 素材现象视频播放没有讲义画面模式 A 平台三份资源缺一不可。时间单位混淆接口返回毫秒FFmpeg 使用秒startTime直接传入 FFmpeg时间放大 1000 倍PPT 切换完全错位。PPT 为 HTML 动态板书不是静态图片此时图片合成方案失效需要使用 Playwright/Selenium 无头浏览器逐段截图生成 PPT 帧。副视频流独立鉴权 Token和主讲视频 Token 不互通屏幕共享副 m3u8 流拥有独立鉴权签名直接复用主讲视频请求会返回 403。slideList 时间数组末尾没有补齐视频总时长视频后半段画面空白最后一页 PPT 无法显示。多轨素材时长不一致主讲视频 30 分钟PPT 素材只有 28 分钟合成后半段黑屏需要做时长校验与补齐。HLS AES‑128 加密分片TS 分片携带EXT‑X‑KEY标签没有密钥下载分片文件也无法解码。大量幻灯片使用 filter_complex 单条滤镜上百条 slide 会让 filter 字符串爆炸FFmpeg 内存溢出、卡死优先选用分段 concat。9、FAQ 常见问题解答Q1三分屏课件可以直接用 m3u8 下载器直接得到完整成品视频吗A模式 B 服务端预合成可以模式 A 前端渲染的三分屏只下载 m3u8 主讲视频只能拿到老师人像无法自动合成 PPT 画面必须获取时间元数据和 PPT 素材后本地二次合成。Q2为什么浏览器播放完整三分屏保存网页无法拿到完整视频A浏览器 DOM 只是渲染层PPT 图片、时间 JSON、视频流是三路独立 HTTP 资源保存网页只能保存 DOM 页面不会自动合并多路媒体资源。Q3生产环境做三分屏离线导出优先选择哪套 FFmpeg 方案A长课时课程优先分段 concat demuxer 方案课时短、幻灯片数量少可使用 filter_complex。Q4HTML 动态板书三分屏如何离线导出A没有简单直接方案工程方案无头浏览器按时间间隔截取页面画面生成一系列图片帧再接入上面分段合成流程。10、技术总结与延伸阅读三分屏课件是国内在线教育非常典型的多源媒体客户端协同渲染架构。很多开发者逆向只关注视频流 m3u8 下载忽略时间元数据这一核心中枢。模式 A 完整离线导出链路 获取课节元数据 → 获取主讲媒体流 → 获取 PPT / 副视频素材 → 获取slideList时间同步元数据 → 素材本地落盘 → 时间轴解析 → FFmpeg 分段渲染合成 → 输出完整三分屏 MP4。这套技术适合学习 Web 多媒体、HLS 流媒体、FFmpeg 滤镜工程开发。再次提醒所有操作务必遵守平台用户协议、著作权法律禁止对未授权课程提取、二次分发。延伸阅读参考网课平台三分屏技术教程参考平台下载教程与源码分析 - 学无止下载器Python subprocess、pathlib 多媒体脚本开发FFmpeg 官方文档filter_complex、concat demuxer、overlay 滤镜RFC‑8216 HLSm3u8流媒体标准