这些是制作新 Remotion 项目和合成画面的说明。 如果这不是下一个任务,请参阅 Remotion 最佳实践。
脚手架搭建项目
如果项目已存在,请跳过此步骤。 确保已安装 Node.js 和 Git,并且当前文件夹适合启动新项目。
在决定脚手架搭建位置之前,请检查当前文件夹,包括隐藏文件。
空文件夹
如果文件夹为空,或仅包含可丢弃的操作系统元数据(例如 .DS_Store),则直接在当前文件夹中创建项目。
首先删除这些可丢弃的元数据文件,因为 create-video 会拒绝非空文件夹。
不要将所有隐藏文件视为可丢弃:例如 .env 文件和 .git 目录是具有意义的内容。
在现有文件夹中搭建脚手架:
npx create-video@latest --yes --blank --no-tailwind .
npm i
非空文件夹
如果当前文件夹包含有意义的内容且尚未存在项目,则新建一个子文件夹来搭建脚手架。
将 my-video 替换为合适的项目名称。
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
在构建视频前打开预览
一旦项目可以运行,请在编写或更改合成画面之前在浏览器中打开 Remotion Studio。对于新项目,请在搭建脚手架并安装依赖后立即执行此操作。对于现有项目,请在编辑视频前执行此操作。在工作期间保持 Studio 运行,以便用户可以看到更改的效果并引导最终结果。
设计视频
保留脚手架并添加 React 标记。 遵循 Remotion React 标记最佳实践和视频布局规则,以获取视频优先布局和文本尺寸调整的指导。
在编写注册 <Composition> 或 <Still> 元素的根组件之前,请遵循合成画面和静态画面。
这是一个时间线剪辑吗?
如果视频在时间线上排列多个视频或音频剪辑,请遵循视频编辑指导,然后再编写时间线。为每个应独立编辑的剪辑分配其自己的创作 JSX 节点。
这是一个多场景视频吗?
如果这是一个包含多个连续场景的视频,请遵循多场景视频指导。
交互性最佳实践
通过遵循 Remotion 交互性最佳实践来构建 React 标记,用户可以在 Studio 中进行编辑并写回代码。
TailwindCSS
如果请求使用 Tailwind,请参阅 tailwind.md 了解如何在 Remotion 中使用 TailwindCSS。
后续步骤
视频创建过程已完成。 对于后续提示,请使用 Remotion 最佳实践。