Remotion批量渲染实战指南：3步把一份数据变成一库MP4

Remotion批量渲染实战指南3步把一份数据变成一库MP4【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion运营甩来100家门店的名单要求每家出一个30秒的日报视频用剪辑软件一个个导出根本不现实。这个场景下Remotion的Node.js服务端渲染bundle selectComposition renderMedia就是用来把数据行 → 视频文件写成脚本的工具。 方案速览一条链路跑到底renderMedia() 跑在Node进程里不开浏览器、不点按钮脚本执行完产出直接落盘。构图是唯一事实源同一个Root.tsx在Studio预览、CLI、SSR脚本里行为一致不会预览对、导出错。结果可复现同脚本同数据重跑产出逐帧一致文件名跟着数据主键走方便对账。 最小可行路径第1步建项目装渲染依赖npx create-videolatest cd my-video npm i remotion/renderer remotion/bundler --save-exactremotion/*的版本要和remotion完全一致所以才--save-exact。验证信号npx remotion studio能打开左侧能看到构图列表。第2步理解渲染的两个阶段SSR渲染分两段bundle()先把项目编译成静态bundle然后selectComposition()读出构图的fps、时长和默认props最后renderMedia()逐帧出片。整条链路的实现可以看 renderMedia()。第3步写第一个SSR脚本新建render.mjsimport {bundle} from remotion/bundler; import {selectComposition, renderMedia} from remotion/renderer; const serveUrl await bundle({entryPoint: src/Root.tsx}); const inputProps {storeId: store-001}; const composition await selectComposition({ serveUrl, id: DailyReport, inputProps, });验证信号node render.mjs打出bundle进度并能读到构图的fps和时长。第4步渲染出第一个MP4await renderMedia({ serveUrl, composition, inputProps, codec: h264, outputLocation: out/store-001.mp4, });验证信号out/store-001.mp4存在ffprobe out/store-001.mp4显示的时长和预期一致。 关键配置拆解concurrency→ 作用控制并行渲染的浏览器进程数默认取机器CPU线程的一半也接受百分比字符串。它的定义在 concurrency.tsx。怎么改renderMedia()里传concurrency: 50%或CLI加--concurrency机器和别的任务共享时固定百分比比默认值可预测。crf→ 作用恒定质量因子数字越小画质越好、文件越大见 crf.tsx。怎么改对外交付用18–20存档用23–28。这是文件体积最直接的开关先定下来再批量跑。codec/audioCodec→ 作用决定产出兼容性和下游处理成本h264随处能播需要未压缩音频时用audioCodec: pcm-16。怎么改字符串直接换不用动其他代码。改完任一项先跑一遍短视频对比前后文件体积和画质确认改动方向对了再上量。 完整例子100家门店的日报输入是stores.json[ {id: store-001, name: 望京店, score: 92}, {id: store-002, name: 徐家汇店, score: 88} ]构图里用getInputProps()读字段时长由calculateMetadata()按文案长度算出。批处理脚本const stores JSON.parse(await readFile(stores.json, utf8)); for (const store of stores) { const composition await selectComposition({ serveUrl, id: DailyReport, inputProps: {store}, }); await renderMedia({ serveUrl, composition, inputProps: {store}, codec: h264, crf: 20, outputLocation: out/daily/${store.id}.mp4, }); }关键参数crf: 20保证交付画质文件名跟store.id走天然可对账。验证方式ls out/daily | wc -l等于门店数抽任意一条播放画面里的数字和JSON里score对得上。数据量上千时换 dataset渲染文档 里描述的dataset方式不要在循环里自己手写并发。⚠️ 踩坑与调优渲染出来的视频时长不对、内容卡在首帧→ 只把inputProps传给了renderMedia()忘了传给selectComposition()。时长依赖输入props时两处不同步就会算错。解法两处引用同一个变量别复制粘贴两份。concurrency越调越慢内存飙高→ 每个渲染进程都会起独立浏览器机器内存不够时并发反而触发换页。解法调回50%或更低开发期先用npx remotion still DailyReport f.png --frame30验单帧再跑全量。文件太大调crf压不下去→crf只定质量锚点不封顶码率。解法要卡体积上限就用videoBitrate指定码率两者解决的是不同问题别混着调。输出没有音轨→ 先查构图里Audio是否真的在时间轴上再查是否设置了mute选项定义见 mute.tsx。用ffprobe验一次输出里必须出现 audio 流才算过。收尾Remotion的服务端渲染把视频生产从操作变成脚本数据变了重跑一遍产出逐条可对账。下一步动作挑一个你在Studio里已经预览过的构图按上面四步写完render.mjs跑通它拿到一个时长、内容都和预览对得上的MP4。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考