如何用 Remotion 批量生成多语言视频：3 个语言版本的完整渲染指南

如何用 Remotion 批量生成多语言视频：3 个语言版本的完整渲染指南

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion

给一份产品视频做出英语、葡萄牙语、中文 3 个版本，手动逐条剪辑很难保证画面一致。用 Remotion 批量生成多语言视频的思路是：写一次 React 组件，把语言和文案作为参数传入，再用渲染脚本循环输出全部语言。读完这篇指南，你能独立搭出一条"文案输入到 3 条 mp4 输出"的自动化链路。

真实场景：一条产品视频要出 3 个语言版本

假设任务是这样：30 秒产品介绍，画面完全相同，差别只在三处——字幕语言、配音音轨、字幕时长。如果用剪辑软件手动做，每改一版文案就要重新对齐时间轴，3 个语言就是 3 遍，改一次文案全部重来。

这里注意，Remotion 的做法反过来：画面、动画、时间轴只定义一次，语言和文案是"输入参数"。改文案不用动组件，重跑脚本即可。下面先列清单，再走一遍完整数据流。

动手前需要准备什么

先把 4 样东西备齐，后面每个环节都会用到：

• 一个 Remotion 项目。可以直接在仓库里参考packages/template-audiogram，它带音频可视化和时间轴，适合做配音视频
• 渲染侧依赖：@remotion/renderer，提供renderMedia接口
• TTS 能力：一个语音合成服务的 API Key（仓库内有现成模块packages/elevenlabs，可按语言选择不同 voice）
• 一份语言配置，例如languages.json，每个语言条目包含：语言码、配音 voice、该语言的字幕文案

配置示意（不是代码，方便你对着准备）：en配英文 voice 和英文文案，pt-BR配葡语 voice，zh配中文 voice。文件放哪都行，脚本能读到即可。

跟着一条数据走完全流程

整条链路只有三段：输入、处理、输出。

输入是结构化文案：一个对象里按语言码存文本和 voice。处理发生在两层：第一层是组件，它从useCurrentProps()拿到当前语言的数据渲染画面；第二层是脚本，它遍历语言表，为每种语言发起一次渲染。输出落在磁盘上，每个语言一个 mp4。

renderMedia是这条链路的枢纽，它把"组件 + 参数"变成一个视频文件。核心调用只有 3 个字段，位置在packages/renderer/src/render-media.ts：

await renderMedia({ composition: { id: 'MultilingualVideo' }, inputProps: { lang: 'en', text: copy.en, audio: 'public/en.mp3' }, serveUrl, output: 'out/en.mp4', });

脚本对 3 个语言各调一次，画面组件一行不用改。

三个关键实现拆解

参数化输入：语言差异全部收敛到 props

问题：怎么让"画面相同、内容不同"这件事在类型层面成立？方案是给合成定义一个 props 结构，lang、text、audio都是必填字段，渲染时缺参数直接报错，而不是渲出一条空白视频。组件内部只认 props，不写死任何语言内容。

renderMedia 接口：让渲染变成可循环的一步

问题：批量脚本怎么触发渲染？renderMedia（packages/renderer/src/render-media.ts）接收 composition 和 inputProps，返回 Promise，天然适合放在for循环或Promise.all里。你甚至可以在循环里按语言切换 codec 或分辨率，参数化就是它的用途。

TTS 模块：按语言合成配音再回传给渲染

问题：配音从哪来？仓库里的packages/elevenlabs提供按语言合成语音的能力，思路是：渲染脚本先对每种语言的文案调用合成，把音频写到public/<lang>.mp3，再作为inputProps.audio传回渲染步骤。这样合成和渲染解耦，音频已经存在的语言可以跳过合成，省掉重复的 API 调用。

从零跑通完整任务

按下面 5 步执行，每步一个动作：

1. 基于 Remotion 模板建项目，加入@remotion/renderer依赖
2. 写MultilingualVideo组件：文案用useCurrentProps()读取，配音用<Audio>挂载，时长取音频实际长度
3. 准备languages.json，填入 3 种语言的 voice 和文案
4. 写render-all.ts：读配置，循环调用renderMedia，输出out/<lang>.mp4
5. 运行脚本，确认 3 个 mp4 全部生成，抽看字幕与配音是否对齐

容易翻车的 4 个地方

文字溢出。现象：中文版本字幕撑破容器。原因：同一句文案在不同语言里长度差 30% 以上。处理：容器限宽加自动折行，或按文本长度动态缩小字号，别写死。

音画不同步。现象：第二句字幕提前于配音出现。原因：时长按词数估算，而 TTS 语速不受控。处理：用音频文件的真实时长切分时间轴，估算值只当兜底。

字体没加载完就截帧。现象：渲染出的字幕是系统默认字体。原因：网络字体请求还没完成，浏览器已截图。处理：用@remotion/google-fonts之类的方案在渲染前显式等待字体就绪。

重复合成浪费配额。现象：每次跑脚本都重新请求 TTS。原因：没做缓存。处理：以"文本 + voice"为 key 检查本地文件是否存在，存在就跳过合成。

收尾

到这里，你已经完成了一件事：同一个 React 组件，一次配置，批量渲染出 3 个语言版本，文案和配音都是参数。下一步值得试的方向有三个：把串行循环改成并行渲染缩短总耗时；把渲染任务分发到@remotion/lambda等分布式渲染服务；再往前一步，为每个语言版本自动生成字幕文件。

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion