用 Remotion 一个下午做出三语视频：React 视频国际化的完整实战

用 Remotion 一个下午做出三语视频：React 视频国际化的完整实战

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

Remotion 是一个用 React 程序化制作视频的开源视频框架：像写组件一样写视频，传入不同的语言参数，同一套 Composition 就能导出多语言视频资源。这篇多语言视频制作教程面向有真实需求、要把产品视频多语言交付的开发者。

场景很常见：一条产品宣传片，要交付中、英、日三个语言版本。传统做法是剪辑软件打开三遍，排版和字幕重做三遍，脚本一改全部重来。而在 Remotion 里，视频是数据驱动的，三个版本只差一个 props 参数——这正是 React 视频做国际化的成本优势。

三步初始化多语言视频项目

先说结论：不需要建三个工程，一个 Composition 可以服务所有语言。关键命令就三步：

npx create-video@latest my-video # 新建 React 视频项目 cd my-video && npm run dev # 启动 studio，浏览器逐帧预览 npx remotion render MyComp out/en.mp4 --props '{"locale":"en"}'

npm run dev会打开本地 studio，拖动时间轴逐帧确认效果。最后一条命令是多语言视频的核心：--props传语言参数，参数值一变就是另一个版本。props 的完整流转机制见官方文档。

文本国际化的落地写法：一个 key 一份翻译

翻译放哪里？我的答案是全部移出组件，用「key 查表」代替写死字符串。

建议在src/locales/下每种语言一个 JSON，组件只引用 key：

{ "en": { "welcome": "Welcome" }, "zh": { "welcome": "欢迎" }, "ja": { "welcome": "ようこそ" } }

这样做的收益：改文案只动 JSON；新增语言只加一个文件，组件代码一行不改。如果文本要做逐词淡入之类的动画，按 key 拆分后对每段做动画，同一套动画逻辑所有语言复用。

字体与排版：CJK 最大的坑

做过非英文渲染的应该都栽过跟头：studio 里中文显示正常，导出的视频里却是一堆方框，因为渲染环境缺字体。

这里建议统一走@remotion/fonts的loadFont()，在代码里声明字体来源，而不是赌机器上装了什么。CJK 文本特别注意两点：

• 选覆盖对应字符集的字体，中日同字符字形不同，必要时分开处理；
• 官方示例里有 Google Fonts 处理 CJK 的现成写法，可以直接抄。

另一个容易踩的坑：同样一句标题，日文往往比英文长，英文放得下的框中文就溢出。建议给文本容器写「按长度降字号」的兜底逻辑，各语言就不会互相打架。

按语言动态切换：用 props 驱动一切

动态切换语言应该是声明式的，而不是改状态。别用useState在时间轴里切语言——渲染时 Remotion 是从第 0 帧到尾逐帧重放的，任何随帧变化的副作用都会把渲染搞乱，这是新手最容易写错的点。

正确姿势：locale从 props 进来，组件只读不写。用Sequence划分时间段，每段根据 props 取对应语言资源。一个工程内同时产出多语言的完整讲法，参考参数化渲染文档。

配音与字幕：多语言视频的音频怎么搞定

文本理顺之后，耳朵里听到什么就是下一个问题。多语言视频的音频一般分两层：

• 配音：每种语言挂各自的<Audio>，素材按audio/zh/...这类路径组织，再用getAudioDurationInFrames()对齐时长，保证各语言版节奏一致；
• 字幕：用 captions 模块，既能解析 SRT，也能承接转写结果。

省事的路径还有：用 OpenAI Whisper 集成把转写结果直接转成 Remotion 字幕格式，多语种转写走同一套 API 即可。

AI 路线特别适合教程类、剪辑类内容：先转写、再翻译转写文本、最后按语言生成字幕。音频细节（延迟、音量、变调）见官方音频章节。

批量渲染：一条视频变三条

demo 跑通之后，最重复的劳动其实是渲染。做法很简单：脚本里遍历语言列表，每种语言调一次 render，输出命名为out/<lang>.mp4。版本数量更多时，看数据集渲染文档，它专门支持「一份数据渲染出一批视频」，多语言只是它最顺手的用例之一。

避坑建议：上线前过一遍这份清单

以下是我实际踩过的坑，发布前逐条过一遍：

1. 字体必须在渲染前加载完，loadFont()没完成就开渲，首帧必出豆腐块；远程容器渲染时更要注意环境里没有本机字体，务必在代码里显式声明；
2. 先测时长再渲染：各语言文本长度不同，逐语言核对总帧数，别等渲完才发现最后一场被切掉；
3. 渲染成本随语言数线性涨：三语就是三倍耗时和云费用，预览一律用 studio，全量渲染只留给交付前；
4. props 集中管理：语言列表和每语言参数放同一个 JSON，路径经--props传入，避免散落在代码和命令行两处；
5. RTL 语言提前规划：要出阿拉伯语、希伯来语版本的话，排版方向性问题在立项时就要写进组件。

接下来可以做的事：

• 翻一翻 example 项目里的音频、字体、字幕示例，很多多语言场景有现成参照；
• 用 Google Fonts 模块解决跨语言字体来源问题；
• 系统过一遍官方文档里的渲染与参数化章节，把批量导出的参数吃透。

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