1. 从 hyperframes 说起一个被低估的 HTML 转 MP4 思路第一次看到 hyperframes 这个词是在一个做自动化内容生产的小圈子里。当时有人丢出一句话“能不能把一段 HTML 直接变成 MP4不装剪辑软件、不手动录屏”底下有人回了一个词——hyperframes。我顺着这条线索摸下去发现它背后其实是一整套“用代码生成视频”的工作流核心链路是HTML CLI AI coding agents → MP4。说白了hyperframes 代表的不是某一个具体软件而是一种思路把网页当成视频的“画布”用 HTML/CSS/JS 描述每一帧的画面再通过命令行工具把这段网页逐帧渲染、编码成 MP4 文件。你写的是网页出来的是视频。这件事听起来有点绕但一旦跑通威力非常大——尤其是当你需要批量生成大量结构相似、只是数据不同的视频时比如数据播报、榜单动画、课程片头、产品参数卡、每日天气播报这类内容。我为什么对这个方向感兴趣因为传统的视频制作流程里最耗时的从来不是“创意”而是“重复劳动”。改一个数字要重新录屏换一个标题要重新导出十条视频里九条是重复操作。而 hyperframes 这套思路本质上是把视频变成了“可编程的产物”数据变了重新跑一遍命令MP4 就出来了。配合现在流行的 AI coding agents比如 codex cli 这类命令行智能体你甚至可以让 AI 帮你写 HTML 模板、调 CSS 动画、生成批量脚本。这篇文章适合谁看如果你是前端开发者想把手里的 HTML/CSS/JS 技能延伸到视频领域如果你是运营或内容创作者想批量产出短视频又不想学剪辑如果你是搞自动化的工程师想把“视频生成”接进自己的流水线——那这套东西值得你花时间研究。下面我会从整体设计、核心细节、实操流程、常见问题四个层面把 hyperframes 这条链路拆开讲清楚尽量让你看完就能动手复现。2. 整体设计与思路拆解为什么用 HTML 当视频画布2.1 核心思路把“帧”变成“网页状态”传统视频是一帧一帧的图片序列每秒 24 帧、30 帧或 60 帧。而 hyperframes 的思路是我不直接画帧我画一个网页然后让这个网页随着时间“动起来”再把每个时间点的网页截图按顺序拼成视频。这个思路的关键在于网页本身就是一台动画机器。CSS 有 transition 和 animationJS 有 requestAnimationFrameSVG 有 SMILCanvas 有逐帧绘制能力。你平时在浏览器里看到的那些丝滑动画本质上就是“时间驱动的画面变化”。既然浏览器能按时间渲染画面那我们只要控制时间轴就能把网页变成视频源。具体来说整个链路是这样的用 HTML/CSS/JS 写一个“视频模板”里面包含所有会动的元素通过 CLI 工具启动一个无头浏览器headless browser加载这个 HTML按照设定的帧率逐帧推进时间轴截取画面把截取的图片序列交给编码器如 FFmpeg合成 MP4如果需要音频再单独混音。这套流程里HTML 是“内容层”CLI 是“控制层”MP4 是“输出层”。三者解耦各司其职。2.2 为什么不用传统剪辑软件有人会问我用剪映、Premiere 也能做视频为什么要折腾这套答案在于“批量”和“可编程”。传统剪辑软件的操作单位是“时间线”你拖拽、裁剪、加特效每一步都是手动操作。做一条视频没问题做一百条就会崩溃。而 hyperframes 这套思路的操作单位是“代码”你写一次模板改数据就能生成一百条。比如你要做 100 个城市的天气播报视频传统方式要手动改 100 次而代码方式只需要一个循环。另一个优势是“版本控制”。HTML/CSS/JS 都是文本文件可以放进 Git 管理。今天改了标题样式明天想回滚一条命令就行。视频工程文件如 .prproj是二进制版本管理很麻烦。还有一个隐性优势AI coding agents 天生擅长写代码不擅长操作图形界面。你让 AI 帮你写一段 HTML 动画它几秒钟就能给你你让 AI 帮你操作剪辑软件它基本无能为力。所以 hyperframes 这条链路天然适合和 AI 协作。2.3 方案选型几种主流实现路径对比目前把 HTML 转成 MP4市面上有几条技术路线各有优劣。我整理了一张对照表方便你根据场景选择方案核心工具优点缺点适用场景无头浏览器逐帧截图Puppeteer / Playwright FFmpeg兼容性最好支持完整 CSS/JS速度较慢资源占用高复杂动画、需要完整浏览器特性Canvas 逐帧绘制node-canvas FFmpeg速度快可控性强不支持 DOM/CSS需重写渲染逻辑数据可视化、图表动画专用渲染框架Remotion 等封装好React 语法学习成本依赖特定生态React 技术栈团队屏幕录制浏览器录屏 API实现简单画质不稳帧率难控快速原型、临时需求从热搜词里能看到 “codex cli remotion” 这个组合说明不少人是在用 Remotion 这类框架配合 AI 命令行工具来做。Remotion 的思路和 hyperframes 很接近都是用代码描述视频只是它更偏向 React 生态。如果你本身是 React 开发者Remotion 上手会更快如果你想要更底层的控制Puppeteer FFmpeg 的组合更灵活。我个人的建议是先用 Puppeteer FFmpeg 跑通最小闭环理解原理之后再决定要不要上框架。因为框架会帮你隐藏很多细节一旦出问题你不理解底层就很难排查。2.4 关键参数帧率、分辨率、时长怎么定在动手之前有几个参数必须先想清楚因为它们直接决定输出质量和文件大小。帧率FPS常见选择是 24、30、60。24 帧是电影标准有“电影感”30 帧适合大多数网络视频60 帧适合游戏、运动类内容。对于 HTML 动画我一般用 30 帧因为 CSS 动画在 30 帧下已经很流畅而且渲染压力比 60 帧小一半。分辨率1080p1920×1080是主流竖屏视频用 1080×1920。如果你要做 4K渲染时间会翻好几倍除非客户明确要求否则没必要。时长这个由内容决定。但要注意帧数 时长 × 帧率。一个 10 秒、30 帧的视频需要渲染 300 张图。如果你有 100 条视频要生成那就是 30000 张图这个量级需要提前评估机器性能。码率MP4 的码率直接影响文件大小和画质。1080p 视频一般用 8-12 Mbps太高文件大太低画质糊。FFmpeg 里可以用-b:v参数控制。提示帧率、分辨率、时长这三个参数一旦定下来就不要中途改。因为改一个整个渲染流程都要重跑非常耗时。3. 核心细节解析与实操要点HTML 模板怎么写才适合转视频3.1 HTML 结构从!doctype html开始就要为视频服务热搜词里反复出现!doctype html html langzh-cn head meta charsetutf-8这一串说明很多人在搜索“标准 HTML 模板”。但用于视频渲染的 HTML和普通网页的 HTML 有几个关键区别。第一尺寸必须固定。普通网页是响应式的宽度自适应视频渲染必须固定画布尺寸比如 1920×1080。你需要在 CSS 里写死body { width: 1920px; height: 1080px; overflow: hidden; }否则截图时会出现滚动条或空白。第二禁用不必要的交互。视频是单向播放不需要鼠标悬停、点击事件。所有交互逻辑都要去掉只保留时间驱动的动画。第三字体要内嵌或预加载。无头浏览器可能没有你系统里的字体如果用了自定义字体必须通过font-face引入或者用系统通用字体。否则渲染出来字体错乱前功尽弃。一个最小可用的视频 HTML 模板长这样!doctype html html langzh-cn head meta charsetutf-8 style * { margin: 0; padding: 0; box-sizing: border-box; } body { width: 1920px; height: 1080px; overflow: hidden; background: #0a0a0a; font-family: PingFang SC, Microsoft YaHei, sans-serif; } .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 120px; color: #fff; opacity: 0; animation: fadeIn 1s ease forwards; } keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -40%); } to { opacity: 1; transform: translate(-50%, -50%); } } /style /head body div classtitleHello Hyperframes/div /body /html这个模板里.title有一个淡入动画持续 1 秒。渲染时你需要在 1 秒内按帧率截取画面就能得到一段淡入效果。3.2 CSS 动画哪些属性适合视频哪些是坑CSS 动画是 hyperframes 的核心表现手段但不是所有 CSS 属性都适合视频渲染。我踩过的坑包括适合的属性opacity、transformtranslate/scale/rotate、color、background-color、width、height、border-radius。这些属性变化平滑渲染稳定。要慎用的属性box-shadow、filter: blur()、backdrop-filter。这些属性在无头浏览器里渲染开销大而且不同版本表现不一致容易出现“本地好看、渲染出来糊了”的情况。绝对要避免的position: sticky、scroll-behavior: smooth、overflow: scroll。视频没有滚动概念这些属性会导致截图错位。另一个关键点是动画时间轴的控制。普通网页动画是“自动播放”的但视频渲染需要“可控播放”。有两种做法用animation-delay和animation-play-state: paused通过 JS 控制播放进度用 JS 的requestAnimationFrame手动计算每个时间点的样式。第一种做法更简单适合大多数场景。你可以在 HTML 里把所有动画设为paused然后通过document.getAnimations()获取所有动画对象逐个设置currentTime再截图。// 在 Puppeteer 里控制动画进度 const animations await page.evaluate(() { return document.getAnimations().map(a a.animationName); }); await page.evaluate((time) { document.getAnimations().forEach(a { a.currentTime time; a.pause(); }); }, 500); // 推进到 500ms这段代码的意思是把所有动画暂停然后统一设置到 500 毫秒的位置。这样你就能精确控制每一帧的画面。3.3 JS 动画什么时候需要怎么写才稳CSS 动画能覆盖 80% 的场景但有些效果必须用 JS比如数据驱动的图表动画数字滚动、柱状图增长复杂的路径动画SVG path 跟随需要根据外部数据动态生成的画面。用 JS 做动画时核心原则是把时间当作唯一输入。也就是说你的渲染函数应该是render(t)给定时间t输出该时刻的画面。不要用setInterval或requestAnimationFrame自己跑因为那样你无法精确控制帧。一个典型的 JS 动画模板function render(t) { const progress Math.min(t / 1000, 1); // 1秒内完成 const el document.querySelector(.bar); el.style.width (progress * 100) %; el.textContent Math.round(progress * 100) %; } // 渲染时外部调用 render(0), render(33), render(66)... window.render render;然后在 Puppeteer 里for (let frame 0; frame totalFrames; frame) { const time frame * (1000 / fps); await page.evaluate((t) window.render(t), time); await page.screenshot({ path: frames/frame-${frame}.png }); }这种写法的好处是渲染完全可复现。同样的时间输入永远得到同样的画面。不会因为机器性能不同导致动画速度不一致。3.4 CLI 工具链从 codex cli 到 FFmpeg 的衔接热搜词里出现了codex cli、zcode cli、trae cli、minimax cli、openspec cli等一堆命令行工具说明大家很关注“用 CLI 驱动整个流程”。这确实是 hyperframes 的精髓一切皆命令一切可脚本化。一个典型的 CLI 工作流是这样的# 1. 用 AI coding agent 生成 HTML 模板 codex cli generate --prompt 生成一个1080p的视频模板标题淡入背景渐变 --output template.html # 2. 用 Puppeteer 脚本渲染帧 node render.js --input template.html --fps 30 --duration 5 --output frames/ # 3. 用 FFmpeg 合成 MP4 ffmpeg -framerate 30 -i frames/frame-%04d.png -c:v libx264 -pix_fmt yuv420p -b:v 10M output.mp4这三步可以写进一个 shell 脚本甚至可以用 Makefile 管理。以后只要改模板重新跑一遍就行。关于 AI coding agents 的使用我的经验是让它写模板骨架不要让它写渲染逻辑。因为渲染逻辑涉及具体的帧控制、文件路径、参数传递AI 容易写错。而 HTML/CSS 模板是它的强项你描述清楚需求它几秒钟就能给你一个可用的版本。注意不同 CLI 工具的语法不一样上面只是示意。实际使用时先查清楚你用的工具支持哪些命令。比如 codex cli 有/compact、/model、/resume这些命令用之前最好先看文档。4. 实操过程与核心环节实现从零跑通一条 HTML 转 MP4 流水线4.1 环境准备Node.js、Puppeteer、FFmpeg 三件套在动手之前先把环境搭好。你需要Node.js建议 18 或 20 LTS 版本。太老的版本不支持 Puppeteer 的新特性。Puppeteernpm install puppeteer。它会自动下载一个 Chromium不用你手动装浏览器。FFmpeg这是视频编码的核心工具。Windows 可以去官网下载压缩包解压后把bin目录加到 PATHmacOS 用brew install ffmpegUbuntu 用apt install ffmpeg。装完之后验证一下node -v ffmpeg -version两个命令都能输出版本号说明环境 OK。这里有个坑Puppeteer 下载的 Chromium 可能和你的系统不兼容。如果渲染时报错可以试试puppeteer-core配合系统已安装的 Chrome。另外在 Linux 服务器上跑可能需要额外装一些依赖库比如libnss3、libatk-bridge2.0-0等。具体缺什么报错信息里会写照着装就行。4.2 写一个最小可用的渲染脚本下面是一个完整的渲染脚本我把它拆成几块讲。const puppeteer require(puppeteer); const fs require(fs); const path require(path); const FPS 30; const DURATION 5; // 秒 const WIDTH 1920; const HEIGHT 1080; const TOTAL_FRAMES FPS * DURATION; (async () { const browser await puppeteer.launch({ headless: new, args: [--no-sandbox, --disable-setuid-sandbox] }); const page await browser.newPage(); await page.setViewport({ width: WIDTH, height: HEIGHT, deviceScaleFactor: 1 }); const htmlPath path.resolve(__dirname, template.html); await page.goto(file:// htmlPath, { waitUntil: networkidle0 }); // 等待字体加载 await page.evaluateHandle(document.fonts.ready); const framesDir path.resolve(__dirname, frames); if (!fs.existsSync(framesDir)) fs.mkdirSync(framesDir); for (let i 0; i TOTAL_FRAMES; i) { const time (i / FPS) * 1000; await page.evaluate((t) { if (window.render) window.render(t); document.getAnimations().forEach(a { a.currentTime t; a.pause(); }); }, time); const filename frame-${String(i).padStart(4, 0)}.png; await page.screenshot({ path: path.join(framesDir, filename) }); } await browser.close(); console.log(渲染完成共 ${TOTAL_FRAMES} 帧); })();这个脚本做了几件事启动无头浏览器设置视口为 1920×1080加载本地 HTML 文件等待字体加载完成这一步很重要否则字体可能没渲染出来循环每一帧推进动画时间截图保存关闭浏览器。注意deviceScaleFactor: 1这个参数。如果你设成 2截图会是 3840×2160文件大一倍渲染慢一倍。除非你要做 4K否则保持 1。4.3 用 FFmpeg 合成 MP4参数怎么调帧渲染完之后用 FFmpeg 合成视频ffmpeg -framerate 30 -i frames/frame-%04d.png \ -c:v libx264 -pix_fmt yuv420p -b:v 10M \ -movflags faststart \ output.mp4逐参数解释-framerate 30输入帧率必须和渲染时一致-i frames/frame-%04d.png输入文件模式%04d表示四位数字序号-c:v libx264视频编码器H.264 兼容性最好-pix_fmt yuv420p像素格式这个必须设否则某些播放器打不开-b:v 10M码率 10 Mbps1080p 够用-movflags faststart把元数据放到文件开头方便网络播放。如果你要压缩成 H.265热搜词里有mp4压缩h265把libx264换成libx265码率可以降到 5M文件会小很多。但 H.265 兼容性不如 H.264老设备可能播不了。提示FFmpeg 合成时如果报“找不到文件”检查文件名序号是否从 0 开始以及%04d的位数是否匹配。比如你有 10000 帧就要用%05d。4.4 加音频两条路线视频没声音总感觉差点意思。加音频有两条路线路线一FFmpeg 直接混音。如果你已经有音频文件可以在合成时直接加ffmpeg -framerate 30 -i frames/frame-%04d.png -i audio.mp3 \ -c:v libx264 -pix_fmt yuv420p -c:a aac -shortest \ output.mp4-shortest表示以较短的流为准避免音频比视频长。路线二用 Web Audio API 在浏览器里生成。如果你想让音频和动画精确同步可以在 HTML 里用 Web Audio API 生成音频然后通过 Puppeteer 录制。但这条路比较复杂一般不建议。我的经验是先做无声视频跑通之后再考虑音频。因为音频同步是个大坑容易让你在早期就卡住。4.5 批量生成把变量抽出来单条视频跑通之后批量就简单了。核心思路是把变化的部分抽成变量用模板引擎渲染 HTML。比如你要做 100 个城市的天气播报可以这样const cities [ { name: 北京, temp: 25, weather: 晴 }, { name: 上海, temp: 28, weather: 多云 }, // ... ]; for (const city of cities) { const html template.replace({{name}}, city.name) .replace({{temp}}, city.temp) .replace({{weather}}, city.weather); fs.writeFileSync(temp.html, html); // 然后跑渲染脚本 }更优雅的做法是用 Handlebars、EJS 这类模板引擎。但核心逻辑是一样的数据 → HTML → 帧 → MP4。批量生成时要注意每渲染一条视频都要重新加载页面。不要试图在一个页面里连续渲染多条因为动画状态会残留。最稳妥的方式是每条视频启动一个新的 page渲染完就关掉。5. 常见问题与排查技巧实录我踩过的那些坑5.1 渲染出来是白屏或黑屏这是最常见的问题。原因通常有三个原因一页面还没加载完就截图了。解决办法是用waitUntil: networkidle0或者手动等待某个元素出现。原因二动画初始状态就是不可见。比如opacity: 0如果你在时间 0 截图当然是黑的。解决办法是确保第一帧有内容或者从时间 0 之后开始截。原因三字体或图片没加载。无头浏览器加载本地文件时相对路径可能出错。建议用绝对路径或者把资源内联成 base64。排查方法先截一张图看看如果单张图正常那就是时间控制的问题如果单张图也不正常那就是加载或样式的问题。5.2 动画速度不对忽快忽慢这个问题通常是因为你用了requestAnimationFrame或setInterval自己驱动动画。无头浏览器的帧率不稳定导致动画速度不可控。解决办法永远用外部时间驱动。也就是说动画的每一帧都由渲染脚本传入时间参数而不是让页面自己跑。前面给的render(t)和document.getAnimations()方案都是这个思路。5.3 FFmpeg 合成报错“Invalid data found”这个错误一般是输入文件有问题。检查几点帧文件是否完整有没有 0 字节的文件文件名序号是否连续中间有没有缺帧-framerate是否和实际帧率一致。如果帧数很多建议先用ls frames/ | wc -l数一下文件数量和预期对比。5.4 视频文件太大1080p、30 帧、10 秒的视频如果码率设成 20M文件可能上百 MB。压缩方法降低码率到 5-8M用 H.265 编码降低分辨率到 720p用-crf参数做质量压缩比如-crf 23数值越大压缩越狠。我一般用-crf 20作为默认值画质和体积比较平衡。5.5 常见问题速查表问题现象可能原因解决办法白屏/黑屏页面未加载完、初始透明等待加载、调整初始状态动画速度异常用了 rAF/setInterval改用外部时间驱动字体错乱字体未加载内联字体或等待 fonts.readyFFmpeg 报错帧文件缺失或序号不连续检查文件数量和命名文件过大码率过高降码率、用 H.265、调 CRF渲染太慢分辨率高、帧率高降分辨率、降帧率、并行渲染颜色偏差像素格式不对用 yuv420p5.6 独家避坑技巧技巧一先渲染 1 秒测试。不要一上来就渲染 10 秒先渲染 1 秒看看效果。确认没问题再全量渲染能省很多时间。技巧二用page.evaluate注入时间。不要试图在 HTML 里写死动画时间而是通过page.evaluate动态注入。这样同一个模板可以渲染不同时长的视频。技巧三并行渲染。如果你有多核 CPU可以同时启动多个 Puppeteer 实例每个负责一部分帧。但要注意内存占用一般 4-8 个实例比较合适。技巧四帧文件用 PNG 不用 JPG。PNG 无损JPG 有压缩伪影。虽然 PNG 文件大但渲染质量有保障。如果磁盘空间紧张可以用 FFmpeg 直接接收图片流不落盘。技巧五保留渲染脚本。每次手动敲命令容易出错把渲染逻辑写成脚本参数用命令行传入。这样以后复用方便也方便交给 AI 帮你改。6. 进阶玩法和 AI coding agents 配合的几种姿势6.1 让 AI 写模板你只管调参数这是最直接的用法。你把需求描述清楚让 AI 生成 HTML 模板。比如“生成一个 1920×1080 的视频模板深色背景中间一个大标题标题从下方淡入持续 1 秒然后保持 2 秒。”AI 几秒钟就能给你一个可用的模板。你拿到之后改改文字、调调颜色就能用。但要注意AI 生成的模板不一定适合视频渲染。它可能用了vh、vw单位或者用了响应式布局。你需要手动改成固定像素。另外AI 可能会用一些花哨的 CSS 属性比如backdrop-filter这些在无头浏览器里可能表现不一致。所以拿到模板后先渲染 1 秒测试确认没问题再继续。6.2 让 AI 帮你写批量脚本如果你有 100 条数据要生成视频手动写循环很烦。可以让 AI 帮你写“我有一个 JSON 文件里面有 100 条数据每条包含 title 和 value。帮我写一个 Node.js 脚本读取 JSON循环生成 HTML然后调用渲染函数生成 100 个 MP4。”AI 会给你一个完整的脚本你只需要改改路径和参数。这比你自己从头写快得多。6.3 用 CLI 工具串联整个流程热搜词里提到的codex cli、zcode cli这些工具本质上是把 AI 能力封装成命令行。你可以这样用# 用 AI 生成模板 codex cli generate --prompt 视频模板标题淡入 --output template.html # 用 AI 生成数据 codex cli generate --prompt 生成10个城市的天气数据JSON格式 --output data.json # 跑渲染脚本 node render.js --template template.html --data data.json --output videos/这样整个流程就是AI 生成内容 → 脚本渲染 → 批量输出。你只需要在关键节点做质量检查。6.4 注意事项AI 不是万能的虽然 AI 能帮你写很多代码但有几个地方它容易出错时间控制逻辑AI 经常把动画写成自动播放而不是外部时间驱动。你需要手动改。文件路径AI 写的路径经常是相对路径在无头浏览器里可能找不到文件。改成绝对路径。参数计算帧数、时长、帧率的换算AI 有时会算错。自己验算一遍。我的经验是AI 写 80%你改 20%。不要指望 AI 一次生成完美代码但它可以帮你省掉大量重复劳动。7. 这条链路还能怎么扩展跑通基础流程之后你会发现这套东西的扩展性很强。几个我试过的方向方向一数据可视化视频。把 CSV 或 JSON 数据喂给模板自动生成柱状图、折线图动画。适合做周报、月报、数据播报。方向二批量课程片头。同一个片头模板换不同的课程名称和讲师名字批量生成几十条。比手动做快得多。方向三社交媒体卡片视频。把文章标题、摘要、封面图组合成 15 秒短视频适合做内容分发。方向四和现有系统集成。比如你的 CMS 发布文章时自动触发视频生成把文章变成视频版本。这需要把渲染脚本封装成 API用队列管理任务。方向五实时渲染。如果你需要直播场景可以把渲染速度调到实时用 WebSocket 推流。但这需要更高的性能一般机器扛不住。我个人最看好的是方向一和方向二因为这两个场景的“批量”需求最强烈而 hyperframes 这套思路正好解决批量问题。至于实时渲染目前成本还太高除非你有特殊需求否则不建议折腾。最后分享一个小技巧把渲染脚本做成 Docker 镜像。这样换机器、上服务器都不用重新配环境一条docker run就能跑。尤其是团队协作时大家用同一个镜像避免“在我机器上能跑”的问题。