使用 Remotion 制作视频

使用 Remotion 制作视频 是做什么的？

这是一个 代理驱动 的操作 - 你将读取需求规格文件并直接编辑主规格以应用更改。这允许智能合并（例如，在不复制整个需求的情况下添加一个场景）。

概述

使用 Remotion（一个用于在 React 中创建视频的库）在 React 应用中程序化生成视频。

前提条件

• 已安装 Node.js 18+、npm 或 yarn
• 熟悉 React 组件和 JSX
• 已安装 Remotion（通过 npx create-video 或添加到现有项目）

步骤

1. 设置 Remotion 项目（如果尚未设置）

   如果项目尚未初始化，请运行：

   npx create-video@latest
   

   这将创建一个新的 Remotion 项目，包含合适的模板和配置。

2. 理解 Remotion 核心概念

   • 组合 (Composition): 定义视频的结构，包括时长、分辨率和帧率。
   • 场景 (Scene): 组合中的单个组件或序列。
   • 时间线 (Timeline): 视频帧的顺序，表示为 React 组件的渲染。
   • React 组件: 每帧都是 React 组件，允许使用所有 React 特性和库。

3. 创建视频组件

   在 src/ 目录下创建一个新的 React 组件。例如，创建一个简单的动画：

   // src/MyVideo.tsx
   import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
   
   export const MyVideo: React.FC = () => {
     const frame = useCurrentFrame();
     const { width, height } = useVideoConfig();
     const opacity = Math.min(1, frame / 30);
   
     return (
       <AbsoluteFill style={{ backgroundColor: 'white' }}>
         <div style={{ opacity, fontSize: 40, textAlign: 'center', marginTop: height / 2 }}>
           Hello, Remotion!
         </div>
       </AbsoluteFill>
     );
   };
   

4. 注册组合

   在 src/Root.tsx 中注册组合：

   // src/Root.tsx
   import { Composition } from 'remotion';
   import { MyVideo } from './MyVideo';
   
   export const RemotionRoot: React.FC = () => {
     return (
       <>
         <Composition
           id="MyVideo"
           component={MyVideo}
           durationInFrames={150}
           fps={30}
           width={1920}
           height={1080}
         />
       </>
     );
   };
   

5. 渲染视频

   使用 Remotion CLI 渲染视频：

   npx remotion render src/index.ts MyVideo out/video.mp4
   

   这将从组合 MyVideo 渲染一个 MP4 文件到 out/video.mp4。

6. 添加音频和高级功能

   • 音频: 使用 Audio 或 useAudioData 组件添加背景音乐或音效。
   • 过渡效果: 使用 spring 或 interpolate 函数实现平滑过渡。
   • 数据可视化: 使用 React 图表库（如 recharts）创建数据驱动动画。

主规格格式

主规格是视频组件的最终输出。它们不得包含操作头部（如 ## ADDED/MODIFIED/REMOVED/RENAMED）。同步后，所有视频配置应位于一个单一的 ## 视频规格 部分下：

# <视频名称> 规格

## 目的
描述此视频的目的和内容。

## 视频规格

### 组合：MyVideo
- 时长：150 帧（5 秒）
- 帧率：30 fps
- 分辨率：1920x1080
- 背景色：白色
- 音频：无

关键原则：智能合并

与程序化合并不同，你进行合并而不是覆盖：

• 保留主规格中未提及的任何内容。
• 如果增量块包含整个要求，则使用增量版本替换它。
• 确保验证通过后再声明成功。

验证

运行 npx remotion compositions 以验证所有组合正确注册。