Puppeteer截图+FFmpeg合成MP4是最可行方案：启动Chromium实例准确渲染各类内容，逐帧截图后用FFmpeg严格按帧率、尺寸、无音频参数合成视频，需注意环境字体、权限及动态内容就绪检测。
用 Puppeteer 截图合成 MP4 是最可行的路径
浏览器本身不支持直接导出 HTML 为 MP4，puppeteer 是目前工程实践中最稳定、可控性最强的方案：它启动真实 Chromium 实例，能准确渲染 CSS 动画、Canvas、WebGL 和字体，再逐帧截图，最后用 FFmpeg 合成视频。
别试 html2canvas + ffmpeg 这类纯前端方案——它无法渲染 iframe、跨域资源、position: fixed 元素，且对 transform 和 filter 支持极差，生成的视频常有错位或空白帧。
关键步骤：启动 → 渲染 → 截图 → 合成
整个流程必须串行控制时间点，否则动画不同步、首帧白屏、最后一帧截不全是高频问题。
- 用
puppeteer.launch({ headless: "new" })启动，"new"模式比true更兼容现代 CSS 特性 - 加载页面后，务必等
page.waitForFunction(() => document.readyState === "complete")，不能只靠page.goto(url, { waitUntil: "networkidle0" })—— 静态资源空闲不代表 JS 动画已就绪 - 截图前调用
page.setViewport({ width: 1920, height: 1080 })，宽高必须和后续 FFmpeg 的-s参数严格一致，否则视频拉伸或黑边 - 逐帧截图用
page.screenshot({ type: "png", path: `frame-${i}.png` })，不要用jpeg—— 透明背景或抗锯齿文字会丢细节
FFmpeg 合成时的三个硬性参数
截图只是中间产物，FFmpeg 命令写错一参数，视频就卡顿、掉帧或音画不同步（即使没音频也要显式禁用）。
立即学习“前端免费学习笔记（深入）”；
- 帧率必须和截图逻辑匹配：如果每 100ms 截一帧，对应
-framerate 10；设成30就会插值伪造帧，动效变糊 - 强制指定尺寸：
-s 1920x1080，和 Puppeteer 设置的 viewport 完全一致 - 禁用音频流：
-an，否则 FFmpeg 可能卡在等待音频输入，超时失败 - 完整命令示例：
ffmpeg -framerate 10 -i frame-%d.png -s 1920x1080 -an -c:v libx264 -pix_fmt yuv420p output.mp4
本地开发时容易被忽略的坑
代码在 CI 或 Linux 服务器跑失败，90% 出在环境差异上，不是逻辑问题。
-
puppeteer默认下载的 Chromium 不含音频/视频编解码器，但你不需要它们——只要不播媒体，不影响截图。别费劲换puppeteer-core+ 手动装 Chrome - Linux 服务器缺字体？Chrome 渲染中文变成方块。解决方法是提前安装：
apt-get install fonts-noto-cjk（Debian/Ubuntu）或yum install google-noto-*-fonts（CentOS） - 截图目录权限不足导致
frame-0.png写入失败，错误信息藏在page.screenshot()的 Promise reject 里，不是控制台报错——务必用try/catch包住 - 生成几百张 PNG 占满磁盘？加个清理步骤：
rm frame-*.png，别等合成完才删
真正麻烦的是那些“看起来动了但实际没渲染完”的场景：比如 Vue 的 v-show 切换、React 的 useEffect 异步加载图表、或者 Web Animations API 的 finished 事件监听漏掉。这时候不能靠固定延时，得用 page.waitForFunction 等具体 DOM 状态或 JS 变量就位。
