在 Adstacker，视频广告是剪辑片段、字幕时间、文本图层、样式、动画、纵横比和行动号召的组合。创作者需要立即看到这些选择——并且最终导出的视频必须与其相符。
这就是我们使用 Remotion 的原因。它基于 React 的合成功能支持可编辑的预览，并为渲染视频提供相同的视觉规则。我们只需定义一次创意，即可保持两种体验的一致性。
挑战：预览和导出常常出现偏差
创意工具通常面临一个令人沮丧的问题：编辑器预览看起来没问题，但导出的文件却不一样。文本位置可能发生偏移，字体换行可能不同，字幕可能在错误的时间出现，或者剪辑序列在导出后播放方式可能发生变化。
当用户混合片段、选择字幕样式、添加 hook/body/CTA 文本并更改输出纵横比时，问题会变得更糟。如果每个界面独立解释这些设置，微小的差异就会累积起来。
Adstacker 需要即时预览和可扩展的渲染。合成必须在编辑时灵活，并在生产中可预测。
预览和渲染的共享合成
我们的核心构建块是一个共享的 Remotion VideoTemplate。它接受：
- 一个视频或一系列视频片段
- 总时长和帧率
- 所选纵横比的目标画布尺寸
- 定时文本、CTA 和字幕图层
- 每个图层的样式和动画设置
Remotion 的 Series 将片段串联成一个时间轴。Sequence 将文本和字幕图层放置在特定帧。因此，一个变体是数据，而非一次性编辑的文件。
架构
前端和渲染路径共享模板、字体、字幕样式映射和图层类型。一种样式在浏览器和最终广告中的含义是相同的。
使用 Remotion Player 进行实时预览
Remotion Player 提供交互式预览画布。当创作者更改 hook、body、CTA、字幕样式或纵横比时，我们向模板传递更新的 props，而不是构建新文件。
预览使用真实的合成，而不是静态近似。它将顺序剪辑、定时字幕、动画文本和选定画布尺寸一同显示，并带有熟悉的播放控制。
对于文本编辑，预览会暂时隐藏活动合成图层，同时画布编辑器处理交互。存储的位置随后流回该 Remotion 图层——无需创建单独的视觉模型。
动态图层，帧级定时
Remotion 提供了基于帧的时间轴，因此每个图层都有开始帧和持续时间，而不是不精确的视觉猜测。
定时字幕词语被分成短块，并在到达合成之前转换为帧。每个 hook、body 或 CTA 同样具有定义好的时间窗口、样式、动画和位置。模板仅渲染当前帧的图层。
这使得新的变体成为一种数据更改：Adstacker 为同一组件提供不同的图层规格——这是我们的 视频技术工程 团队在客户端媒体管道中应用的、可组合的、模板驱动的方法。
为忠实的渲染输出而设计
浏览器预览和渲染工作程序解码视频的方式并非完全相同。我们的模板会检查是否处于渲染模式：在浏览器中，它使用 Remotion 的 Video 组件，以便 Player 可以播放源音频；在渲染时，它使用 OffthreadVideo，这更适合可靠的服务器端帧提取。
我们还在两种上下文之间共享字体和样式映射。这保持了字幕换行、文本大小和动画行为的一致性。纵横比画布和限制叠加层可防止图层消失在边缘之外。
真实案例：测试一个成功的 hook，无需重新构建每个广告
想象一个品牌，有一个产品演示和两个行动号召，正在测试三个开场 hook 和两种字幕样式。创作者可以以最终比例预览组合，包括其序列、字幕和动画文本。
如果团队更改 hook 文案或移动 CTA，它会更新图层数据。无需重新创建单独的预览设计；渲染管道使用相同的模板规则进行导出。
营销人员可以测试更多的创意，同时控制使视频看起来精良的细节。
自信地构建、预览和渲染
Remotion 帮助 Adstacker 将视频广告视为动态、可重用的合成。相同的模板支持浏览器探索和可预测的输出，而帧感知图层则保持字幕、文本和剪辑的同步。
在 Adstacker 中创建您的下一组 hook、字幕和 CTAs，在构建时预览组合，并导出可供测试的变体。
我们已将这种“预览即导出”的严谨方法应用于其他 AI 视频平台 的构建中，包括 Ssemble’的短视频编辑工具和 VideoCap 的 AI 驱动生成管道，两者均通过我们的 云基础设施服务 管理的渲染基础设施进行扩展。
技术栈： React · Next.js · Remotion · @remotion/player · AWS ECS 渲染工作器 · FFmpeg
阅读我们团队的更多内容
1. 导出服务与视频编辑器管道
2. 构建一个普通视频编辑器
