最稳的纯HTML转MP4方案是Puppeteer逐帧截图+FFmpeg合成：先用无头浏览器加载HTML并精准控制时序截图（需networkidle0、固定分辨率、PNG格式），再以匹配帧率和yuv420p格式用FFmpeg合成MP4；html2canvas等方案无法支持动画、WebGL及音视频，仅适用于静态快照。
用 Puppeteer 截图 + FFmpeg 合成是目前最稳的路
纯 HTML 转 MP4 没有浏览器参与就是纸上谈兵。真实可行的路径只有一条：先让无头浏览器（比如 Puppeteer）加载 HTML，逐帧截图，再用 ffmpeg 把 PNG 序列压成 MP4。别信“一行命令搞定”的 npm 包，它们底层不是调的这个流程，就是缺兼容性或控制力。
为什么不能直接用 html2canvas + jsPDF 或类似方案
html2canvas 只能生成单张静态图，不支持 CSS 动画、transform 过渡、WebGL、视频/音频轨道；jsPDF 本质是 PDF 生成器，和视频编码无关。常见错误现象包括：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported（跨域图片导致）、动画完全冻结、滚动区域截不全。
- 只适合生成「快照」，不是「时间轴」
- 无法捕获
requestAnimationFrame或 CSS@keyframes的中间帧 - 对 Shadow DOM、iframe 内容支持极弱，需手动递归处理
Puppeteer 截图的关键参数和坑
重点不在“能不能截”，而在“截得准不准、帧率稳不稳”。默认 page.screenshot() 是单帧，做视频必须手动控制时序：
- 用
page.evaluate()注入performance.now()或Date.now()标记每帧逻辑时间点，避免截图被 JS 执行延迟拖慢 - 截图前务必等
networkidle0+setTimeout(() => {}, 100)，否则 CSS 动画可能刚启动就被截 - 分辨率设为固定值（如
{ width: 1920, height: 1080 }），别用fullPage: true——它会按内容高度拉伸，导致 ffmpeg 合成时报错height not divisible by 2 - 输出格式必须是
png（非jpeg），否则透明/半透明边缘会因压缩失真，合成后出现闪烁噪点
ffmpeg 合成时最容易翻车的三个配置
截图存好只是开始，ffmpeg 命令里一个参数错，就白跑十分钟：
立即学习“前端免费学习笔记（深入）”；
- 帧率必须和截图节奏一致：如果每 40ms 截一帧，就得用
-framerate 25（1000÷40=25），写成-r 25会触发二次插帧，画面发虚 - 强制指定像素格式：加上
-pix_fmt yuv420p，否则 macOS QuickTime 和部分安卓播放器打不开 - 输入通配符要加引号：
ffmpeg -framerate 25 -i "frame_%05d.png" -pix_fmt yuv420p out.mp4，不加引号在 Windows 下容易因空格或特殊字符报No such file or directory
复杂点在于 HTML 里如果有音频（比如 <audio autoplay></audio>），Puppeteer 不会自动捕获声轨——你得另起一个 ffmpeg 录屏进程同步抓取系统音频，再用 -itsoffset 对齐音画。这事没法绕开原生工具链。
