企业官网建设流程全解析

Remotion 多语言批量渲染：一套模板批量产出本地化视频

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

内容团队常要把同一条视频出成几种语言：画面与节奏一致，只有文案和字幕不同。Remotion 把这个场景处理得很直接：视频本身就是 React 组件，「语言」只是一份inputProps数据，脚本把同一个 composition 跑 N 遍，就得到 N 条成片。下面以一条多语言宣传视频为例，把从文案到成片的链路讲清楚。

🧱 为什么一套 composition 能产出 N 种语言版本

多语言批量的关键在数据驱动：不要为每种语言 fork 一棵组件树，而是让 composition 通过inputProps接收一个lang字段，组件内部用它取出对应语言的文案。所有语言差异——文本、字幕路径、是否右到左——都被压进数据层，渲染管线本身不感知语言数量。

这样做的好处是可复用：画面改动只发生在模板一处，所有语言自动跟随；每个版本的渲染任务变成「模板 × 文案」的纯函数，批量生成天然是幂等的——同一份输入重跑，输出一致。

Remotion 批量渲染多语言视频的工程预览

把语言拆成数据之后，剩下的问题就变成「如何把 N 份数据喂进渲染器」，这正是批量脚本要解决的。

📐 搭一条批量渲染链路：一个循环产出一批成片

最简链路是对语言标签做一遍循环，逐个调用renderMedia。官方入口在 packages/renderer/src/render-media.ts，核心参数是compositionId、entryPoint、serveUrl、inputProps和outputLocation：

// batch-render.ts import {renderMedia} from '@remotion/renderer'; for (const lang of ['en', 'es', 'zh']) { await renderMedia({ compositionId: 'ProductVideo', entryPoint: 'src/index.ts', serveUrl: 'http://localhost:3000', inputProps: {lang}, outputLocation: `out/video-${lang}.mp4`, }); }

这个脚本每次循环只传语言标识，版本间的全部差异由文案数据层供给。注意串行写法是下限：版本数不多时直接换Promise.all并行即可，真正的瓶颈在 CPU 核数；上百条任务时更应交给服务端队列，仓库里的 packages/serverless/ 和 packages/lambda/ 就是对应的分布式实现。

成片出来之前还有一道工序容易被忽略：字幕时间轴。翻译后的文字长度和语速都变了，逐字时间必须跟着重算。

⏱️ 让字幕节奏跟得上每种语言

时间轴不要手写。仓库里现成的两块能力：packages/openai-whisper/ 用 Whisper 模型对音频做转写，产出逐词时间戳；packages/elevenlabs/src/elevenlabs-transcript.ts 定义了带language_code和逐词start/end的转写结构，两种来源格式一致，下游可以共用同一条处理链。

已有 SRT 文件的场景更省事：用 packages/captions/src/parse-srt.ts 解析成Caption数组，再交给createTikTokStyleCaptions把连续字幕切成一屏屏的「page」：

import {createTikTokStyleCaptions} from '@remotion/captions'; const {pages} = createTikTokStyleCaptions({ captions, // 来自 Whisper 或 parseSrt combineTokensWithinMilliseconds: 1800, breakOnSilenceAfterMilliseconds: 700, });

combineTokensWithinMilliseconds控制一屏字幕的紧凑度，breakOnSilenceAfterMilliseconds控制停顿超过多少毫秒就起新屏。多语言版本复用同一组参数，各语言文本长短不一，但剪辑节奏保持一致，这是「同一套模板」观感统一的关键一环。

节奏解决后，批量渲染剩下的坑大多在排版细节上，而不是管线代码。

🌐 边界情况：文本长度、换行与字体兜底

多语言批量渲染很少被代码卡住，真正翻车的是排版：英语长句在词中间换行、中文没有空格、德语比英语平均长约三成。常见做法是给字幕容器设最大宽度、允许折行，再让字号随文案长度收缩，避免长文本撑破画面：

const style: React.CSSProperties = { fontSize: Math.min(48, 320 / Math.max(6, text.length)), whiteSpace: 'pre-wrap', overflowWrap: 'break-word', };

这段逻辑写进模板即可，注意字号下限要留够可读性，收缩系数别把长句压成不可读。另一个高频坑是字体：Linux 渲染机的默认字体栈往往不含中日韩字形，不显式声明会直接渲染成方框。建议在文本元素上声明明确的字体列表并提前加载，仓库的 packages/google-fonts/ 提供了现成的远程字体模块，多语言项目基本可以照搬它的加载方式。

把链路串起来看，多语言批量渲染其实是三层解耦：差异落进数据、时间轴交给逐字转写、排版交给一套约束规则。模板、文案、渲染管线各自独立，新增一种语言就是往文案表里加一条记录。下一步可以试试：先用低分辨率快速批量出所有语言版本，用 packages/captions/ 校验字幕边界后再正式渲染高清成片。

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