Remotion CN - React 视频创建框架

Remotion 是一个用 React 创建视频的强大框架。支持多种输出格式（MP4、WebM、GIF），可以在服务器端渲染视频。

功能

视频创建

• 多输出格式 - MP4、WebM、GIF、PNG 序列
• React 编程 - 用 JSX 创建动画
• 高性能 - 服务器端渲染，比 Canvas 更快
• 代码重用 - 组件化开发，可复用

动画类型

• 变换 - 缩放、旋转、透明度
• 时间轴 - 多轨同时播放
• 音频 - 音轨支持
• 3D - 基础 3D 变换（CSS 3D）

安装

创建新项目

# 使用 create-video
npx create-video@latest my-video
cd my-video

# 或使用 Vite
npx create-vite@latest my-video
cd my-video
npm install remotion

手动安装

npm install remotion @remotion/cli --save-dev

快速开始

示例 1：Hello World 视频

// src/App.tsx
import { Composition } from 'remotion';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition>
      <HelloWorld />
    </Composition>
  );
};

export default RemotionRoot;

// src/HelloWorld.tsx
import { AbsoluteFill } from 'remotion';

export const HelloWorld: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: 'white' }}>
      <div style={{ fontSize: 120, color: 'black', fontFamily: 'sans-serif' }}>
        你好，Remotion！
      </div>
    </AbsoluteFill>
  );
};

渲染视频

# 渲染为 MP4
npx remotion render src/App.tsx out/video.mp4

# 在浏览器中预览
npx remotion studio src/App.tsx

示例 2：动画文本

import { AbsoluteFill, useCurrentFrame, useVideoConfig, Video } from 'remotion';

export const TextSlide: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill style={{ backgroundColor: '#1a1a2a' }}>
      <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100%'
      }}>
        <h1 style={{
          fontSize: 80,
          color: 'white',
          opacity: frame % 60, // 闪烁效果
          transform: `translateY(${Math.sin(frame * 0.1) * 20}px)`
        }}>
          薅羊毛自动化
        </h1>
      </div>
    </AbsoluteFill>
  );
};

export default Video(TextSlide);

高级功能

1. 媒体导入

import { useVideo } from '@remotion/use-video';
import { staticFile } from 'remotion';

export const MyVideo: React.FC = () => {
  const video = useVideo(staticFile('video.mp4'));

  return (
    <Video src={video} />
  );
};

2. 音频

import { AbsoluteFill, useCurrentFrame, Audio, Sequence } from 'remotion';

export const AudioExample: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence>
        <Audio src={staticFile('music.mp3')} />
      </Sequence>
    </AbsoluteFill>
  );
};

3. GIF 输出

import { GIF, useCurrentFrame, staticFile } from 'remotion';

export const AnimatedGif: React.FC = () => {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill style={{ backgroundColor: 'black' }}>
      <GIF width={400} height={400} src={staticFile('image.png')} />
    </AbsoluteFill>
  );
};

4. 时间轴（多轨）

import { AbsoluteFill, Sequence, useCurrentFrame } from 'remotion';

export const Multitrack: React.FC = () => {
  const frame = useCurrentFrame();
  
  return (
    <AbsoluteFill style={{ backgroundColor: 'white' }}>
      <Sequence from={0} durationInFrames={60}>
        <Text>第一轨</Text>
      </Sequence>
      <Sequence from={60} durationInFrames={60}>
        <Text>第二轨</Text>
      </Sequence>
    </AbsoluteFill>
  );
};

配置文件

remotion.config.ts

import { Config } from '@remotion/cli/config';

export default {
  concurrency: 1, // 并发数量
  chromiumPath: null, // 使用默认 Chromium
  ffmpegExecutable: null, // 使用默认 FFmpeg
  log: 'verbose', // 日志级别
  overwrite: true, // 覆盖已存在的文件
  ignore: [
    'node_modules',
    '.git'
  ]
} as Config;

渲染命令

开发模式

# 启动开发服务器
npx remotion studio

# 渲染预览
npx remotion preview src/App.tsx

生产渲染

# 渲染 MP4
npx remotion render src/App.tsx out/video.mp4

# 指定分辨率
npx remotion render src/App.tsx out/video.mp4 --width=1920 --height=1080

# 渲染 GIF
npx remotion render src/App.tsx out/video.gif --codec=gif

# 渲染 PNG 序列
npx remotion render src/App.tsx out/video/ --sequence

# 使用配置文件
npx remotion render src/App.tsx out/video.mp4 --config=remotion.config.ts

最佳实践

1. 性能优化

• 使用 useCallback - 避免重复渲染
• 预计算 - 静态资源提前处理
• 代码分割 - 大视频分解为多个片段

2. 错误处理

• 边界检查 - 避免超出范围
• 容错机制 - 提供默认值
• 日志记录 - 记录错误信息

3. 文件管理

• 输出分离 - 视频文件放在单独目录
• 清理临时文件 - 渲染完成后清理
• 版本控制 - 代码和资源分离

中文资源

文档

• Remotion 中文文档
• Remotion 官方示例
• Remotion API 参考

社区

• Remotion 中文社区
• GitHub Discussions

视频教程

• B站 Remotion 教程
• 抖音 Remotion 教程
• YouTube Remotion 教程

与其他框架对比

常见问题

1. 渲染失败

• 原因: 依赖未安装
• 解决: npm install remotion

2. 内存不足

• 原因: 大视频占用过多内存
• 解决: 代码分割，减少并发

3. Chromium 错误

• 原因: Chromium 环境问题
• 解决: 更新依赖，使用 Docker 容器

4. FFmpeg 错误

• 原因: FFmpeg 未安装或版本不兼容
• 解决: 安装最新版 FFmpeg

示例项目

1. 自动化视频生成器

# 从数据生成产品宣传视频
npx create-video@latest product-video
cd product-video
# 从 API 获取产品数据
# 渲染每个产品的短视频

2. 社交媒体内容

# 自动生成抖音/快手视频
npx create-video@latest social-video
cd social-video
# 根据热点生成视频

3. 教育视频

# 自动生成教学视频
npx create-video@latest education-video
cd education-video
# 从讲义生成视频

AI 集成

用 AI 生成 Remotion 代码

from openai import OpenAI

def generate_remotion_code(video_description):
    """用 AI 生成 Remotion 代码"""
    client = OpenAI(api_key="your_key")
    
    prompt = f"""
    创建一个 Remotion 组件：
    {video_description}
    
    要求：
    1. 使用 TypeScript
    2. 导入 Remotion 必需组件
    3. 代码简洁可读
    4. 添加适当的样式
    """
    
    response = client.chat.completions.create(
        model="gpt-4",
        messages=[{"role": "user", "content": prompt}]
    )
    
    return response.choices[0].message.content

# 使用
code = generate_remotion_code("一个产品展示视频，展示旋转和缩放")
print(code)

版本管理

许可证

MIT

版本: 1.0.0 框架: Remotion (React 视频创建） 适配: 中文环境和社区