3 步批量做出 3 种语言的 Remotion 视频：多语言视频自动化完整指南

3 步批量做出 3 种语言的 Remotion 视频多语言视频自动化完整指南【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion用 Remotion 做视频本质是写 React 组件。这篇文章以「为一个产品介绍视频做出英语、西语、中文 3 个版本」为任务带你用 Remotion 实现多语言视频批量渲染自动化一套模板、一张语言配置表、一个渲染脚本产出全部版本。先把视频写成模板文案和语音都走 props类比模板就像一套「填空」的幻灯片版式文案、配音是填空内容版式和动画是固定框架。在 Remotion 里把会随语言变化的东西全部放进props写死的只有版式。仓库里packages/renderer/src/render-media.ts导出的renderMedia就是渲染入口每次调用只需换一组inputProps。export const ProductVideo: React.FCProps ({ copy, voice, bgUrl }) ( AbsoluteFill style{{ backgroundColor: black }} Img src{bgUrl} style{{ objectFit: cover, opacity: 0.4 }} / Audio src{staticFile(voiceToAudioFile(voice))} / Center p{copy.headline}/p p{copy.body}/p /Center /AbsoluteFill );要点copy是该语言的文案对象voice是语音标识Audio播放该语言的配音文件动画时序全部基于useCurrentFrame()与语言无关一张配置表管 3 种语言数据驱动的语言配置类比把「每种语言长什么样」写成一张表代码只认表不认语言。在项目里放一份语言配置表代码只遍历它{ en: { label: English, voice: en-US-JennyNeural }, es: { label: Español, voice: es-ES-ElviraNeural }, zh: { label: 中文, voice: zh-CN-XiaoxiaoNeural } }再加一张「语音标识 → 实际文件」的映射指向你提前合成好的音频语言文案来源语音文件encopy.en.headlinepublic/en-voice.mp3escopy.es.headlinepublic/es-voice.mp3zhcopy.zh.headlinepublic/zh-voice.mp3新增第四种语言时只改这张表和配音文件模板一行不动。让视频时长自动跟着语音时长走不同语言的配音时长不一样中文常说得更短西语更长。如果时长写死版本之间画面节奏就乱了。解法是calculateMetadata渲染前探测音频时长用它反推总帧数。仓库模板 packages/template-audiogram/src/Root.tsx 就是这个模式的完整实现calculateMetadata{async ({ props }) { const { slowDurationInSeconds } await parseMedia({ src: props.audioUrl, fields: { slowDurationInSeconds: true }, }); return { durationInFrames: Math.ceil(slowDurationInSeconds * 30), }; }}原理文档见 packages/docs/docs/calculate-metadata.mdx。字幕与语音对齐同理audiogram 模板的 packages/template-audiogram/transcribe.ts 用remotion/install-whisper-cpp转录音频、带时间戳地生成captions.json每句字幕自动卡准出现时机。批量渲染脚本怎么写一次跑出全部语言类比把「渲染 3 个版本」写成 for 循环交给脚本就行。import { renderMedia } from remotion/renderer; const languages await import(./languages.json); for (const [code, cfg] of Object.entries(languages)) { await renderMedia({ composition: ProductVideo, inputProps: { lang: code, voice: cfg.voice }, output: output/${code}.mp4, serveUrl, }); }串行省内存适合 3~5 个版本要更快可把循环体包进Promise.all并行渲染注意机器内存要够已合成过的语音文件直接复用别每次重新调用 TTS想丢到云上跑仓库里有 packages/lambda/ 和 packages/vercel/ 两套方案让文字自动适配不同语言类比同一句文案中文 8 个字、西语 20 个字符字号必须跟着变否则会溢出画框。用useRefuseEffect量出容器实际宽度按text.length折算字号给文本容器留 20% 余量避免个别长词撑爆版式中文字体、西语重音符号容易加载失败用 packages/google-fonts/ 声明字体并等加载完再出画面模板里的WaitForFonts是现成做法多行截断时优先缩字号其次减少行数别用overflow: hidden硬裁语音从哪里来仓库自带一整套语音链路按需取用TTS 合成packages/elevenlabs/ 提供 ElevenLabs 转录与文案工具音频转字幕packages/captions/、packages/openai-whisper/字体加载packages/google-fonts/流程建议先用 TTS 把 3 个语言的配音一次性合成好存盘渲染脚本只读本地文件又快又稳。现在就可以动手挑一个 10 秒的产品介绍把文案翻译成英语和西语放进languages.json跑通上面那个 for 循环——你会拿到第一对「同一模板、两种语言」的视频。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考