# 远程技能使用 React 以编程方式创建视频。此技能提供了使用 Remotion 的指导和工具，Remotion 是一个允许您使用 React 组件构建视频内容的框架。 ## 概述 Remotion 是一个基于 React 的视频创建框架，可让您： * 使用熟悉的 React 概念构建视频 * 使用 JavaScript/TypeScript 获取动态内容 * 以编程方式渲染视频 * 将视频创作集成到应用程序中 * 构建可参数化和可重用的视频组件 ## 何时使用此技能在以下情况下使用远程技能： * 创建一个新的Remote项目 * 将视频生成添加到现有的 React 项目中 * 设置Remotion组合 * 配置视频渲染管道 * 创建可重复使用的视频组件 * 将视频渲染与服务器端应用程序集成 ## 快速入门 ### 创建一个新的远程项目 # 使用 npx（推荐） npx 创建视频我的视频 # 或者使用 npm init npm 初始化视频 my-video # 或者使用纱线纱线创建视频我的视频 # 或者使用 pnpm pnpm 创建视频 my-video ### 将 Remotion 添加到现有项目 # 安装核心包 npm 安装远程 # 安装 CLI（用于开发） npm install -D @remotion/cli # 可选：安装渲染器以进行服务器端渲染 npm 安装@remotion/渲染器 ## 项目结构一个典型的Remotion项目结构：我的视频/ ├── src/ │ ├── Root.tsx # 根组成 │ ├── Video.tsx # 主要视频组件 │ ├── Components/ # 可复用组件 │ │ ├── 背景.tsx │ │ ├── 文本.tsx │ │ └── ... │ ├── 作品/ # 视频作品 │ │ ├── MainComp.tsx │ │ └── ... │ └── index.tsx # 入口点 ├── package.json ├──remotion.config.ts # 配置 └── 公开/ └── 资产/ ## 核心概念 ### 1\.成分合成是具有特定持续时间和帧速率的视频场景：从 'remotion' 导入 {Composition}；从'./Video'导入{MyVideo}；导出 const RemotionRoot: React.FC = () => { 返回（ <> <构成 id="我的视频" 组件={我的视频} urationInFrames={300} // 10 秒，30fps 帧率={30} 宽度={1920} 高度={1080} /> ）； }; ### 2\.视频组件从 'remotion' 导入 {AbsoluteFill, useCurrentFrame, useVideoConfig}; 导出 const MyVideo: React.FC = () => { const 框架 = useCurrentFrame(); const {fps} = useVideoConfig(); // 基于帧的动画常量不透明度 = 帧 / 60； // 2秒后淡入淡出返回（ <绝对填充样式={{不透明度}}>

你好，远程！

帧：{frame}

）； }; ### 3\.配置创建“remotion.config.ts”：从'@remotion/cli/config'导入{Config}； Config.setVideoImageFormat('jpeg'); Config.setOverwriteOutput(true); Config.setBrowserExecutable('/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'); ## 常见模式 ### 动画使用 spring 来实现平滑的动画：从'remotion'导入{spring，useCurrentFrame，useVideoConfig}；导出 const AnimatedElement: React.FC = () => { const 框架 = useCurrentFrame(); const {fps} = useVideoConfig(); 常量尺度=弹簧（{ 框架, 帧率, 配置：{ 阻尼：200，刚度：100， }, }); 返回（

动画内容

）； }; ### 输入道具将数据传递给组合： // 组合定义 <构成 id="我的视频" 组件={我的视频} 帧内持续时间={300} 帧率={30} 宽度={1920} 高度={1080} 默认属性={{ 标题：“你好世界”，颜色：“蓝色”，速度：1.0， }} /> // 用法导出 const MyVideo: React.FC<{title: string;颜色: 字符串;速度：数字}> = ({ 标题，颜色，速度， }) => { 返回

{title}

; }; ### 序列按顺序链接动画：从“远程”导入{序列}；导出 const Sequence示例：React.FC = () => { 返回（ <绝对填充> <序列来自={0}durationInFrames={60}> <第一场景/> <序列来自={60}durationInFrames={60}> <第二场景/> <序列来自={120}durationInFrames={180}> <最终场景/> ）； }; ### 循环重复动画：从“远程”导入{循环}；导出 const Loop 示例：React.FC = () => { 返回（ <循环持续时间InFrames={30}次={10}> <弹跳球/> ）； }; ## 渲染视频 ### 在浏览器中预览 npx 远程预览 src/Root.tsx ### 渲染为 MP4 npx 远程渲染 src/Root.tsx my-video --output=output.mp4 ### 使用参数渲染 npx 远程渲染 src/Root.tsx my-video --output=output.mp4 --props='{"title":"自定义标题"}' ### 服务器端渲染从“@remotion/bundler”导入{bundle}；从 '@remotion/renderer' 导入 {renderMedia, selectComposition}；异步函数 renderVideo() { // 打包视频 const bundleLocation = 等待捆绑({ 入口点：'./src/Root.tsx', webpackOverride: (配置) => 配置, }); // 选择合成 const 组合 = 等待 selectComposition({ serverUrl：捆绑位置， id: '我的视频', 输入属性：{}， }); // 渲染等待渲染媒体（{ 组成， serverUrl：捆绑位置，编解码器：'h264'，输出位置：`输出/${composition.id}.mp4`, 输入属性：{}， }); } ## 最佳实践 ### 1\.组件结构 * 保持组件小且可重复使用 * 使用 TypeScript 来保证类型安全 * 将动画提取到单独的钩子或实用程序中 ### 2\.性能 * 当合成长度不变时使用`staticDuration` * 优化图像和资源 * 在复杂组件中谨慎使用 `useCurrentFrame` ### 3\.组织机构源代码/ ├──composes/ # 定义视频场景 ├── Components/ # 可重用的UI元素 ├── hooks/ # 动画的自定义钩子 ├── utils/ # 辅助函数 └── asset/ # 图片、字体等 ### 4\.资产管理 * 使用`public/`文件夹来存放静态资源 * 直接在组件中导入图片 * 在添加到视频之前优化图像 ## 故障排除 ### 视频未渲染 1.检查Chrome/Chromium是否安装 2. 验证组合 ID 是否匹配 3. 确保输出目录存在 4. 在预览中检查控制台是否有错误 ### 性能问题 1. 开发过程中减小组合尺寸 2. 使用较低分辨率进行测试 3. 最小化渲染中昂贵的计算 4. 尽可能使用`staticDuration` ### 内存问题 # 减少内存使用 NODE_OPTIONS=--max-old-space-size=4096 npx 远程渲染 src/Root.tsx my-video ## 高级功能 ### 音频集成从“远程”导入{音频，useAudioData}；导出 const AudioExample: React.FC = () => { const {audioData} = useAudioData('/path/to/audio.mp3'); 返回（ <> <音频 src="/path/to/audio.mp3" /> {/* 如果需要的话可视化音频 */} ）； }; ### 过渡从“@remotion/transitions”导入{TransitionSeries}；导出 const TransitionExample: React.FC = () => { 返回（ <过渡系列> } 输出={<第二个场景/>} > <第一场景/> <第二场景/> ）； }; ### Lambda 渲染对于无服务器视频渲染： npm 安装@remotion/lambda # 部署到 Lambda npx 远程 lambda 站点创建 src/ --site-name=my-site # 在 Lambda 上渲染 npx 远程 lambda 渲染 my-video --output=output.mp4 ## 资源 * [远程文档]() * [远程示例]() * [远程 GitHub]() * [远程不和谐]() * [远程 Twitter]() ## 获取帮助使用远程时： 1.查看官方文档 2. 查看示例存储库 3.加入Discord社区 4.搜索GitHub问题 5. 在 Remotion 社区论坛中提问 ## 后续步骤设置远程项目后： 1.创作你的第一个作品 2. 构建可重用组件 3. 在预览中测试动画 4. 渲染您的第一个视频 5. 性能优化 6. 部署渲染管道

远程

包含技能