代码共享
如果您正在使用播放器,一个常见的愿望是与您的 Remotion Studio 和/或服务器端渲染共享代码。通过正确的设置,您可以编写一次组件并将其用于预览、显示和渲染。
Remotion 和您的 React 应用程序使用不同的 Webpack 配置。因此,如果您想要覆盖您的 Webpack 配置,您需要同时覆盖 Remotion 和 React 应 用程序的配置。
模板
使用我们的一个起始模板:
这些模板已经设置好了 Player 和 Lambda。
手动设置
使用您喜欢的设置在 官方 React 文档 中设置一个 React 项目。常见的选择包括:
虽然您仍然可以使用 Create React App,但它不再被 React 团队积极推荐。
当您的项目设置完成后,添加必要的 Remotion 依赖项:
- npm
- yarn
- pnpm
bash
npm i remotion @remotion/cli @remotion/player
bash
npm i remotion @remotion/cli @remotion/player
bash
pnpm i remotion @remotion/cli @remotion/player
bash
pnpm i remotion @remotion/cli @remotion/player
bash
yarn add remotion @remotion/cli @remotion/player
bash
yarn add remotion @remotion/cli @remotion/player
之后,在您的项目中创建一个 Remotion 子文件夹,并添加三个文件:一个索引文件,一个 Root.tsx
文件用于您的合成列表,以及一个包含您的合成的文件。它可能看起来像这样:
diff
└── src/+ ├── remotion/+ │ ├── index.ts+ │ ├── MyComp.tsx+ │ └── Root.tsx└── app/└── App.tsx
diff
└── src/+ ├── remotion/+ │ ├── index.ts+ │ ├── MyComp.tsx+ │ └── Root.tsx└── app/└── App.tsx
您的组件(例如remotion/MyComp.tsx
)可能如下所示:
tsx
export constMyComp :React .FC <{text : string}> = ({text }) => {return <div >Hello {text }!</div >;};
tsx
export constMyComp :React .FC <{text : string}> = ({text }) => {return <div >Hello {text }!</div >;};
您的视频列表(例如remotion/Root.tsx
)可能如下所示:
tsx
import {Composition } from 'remotion';import {MyComp } from './MyComp';export constMyVideo = () => {return (<><Composition component ={MyComp }durationInFrames ={120}width ={1920}height ={1080}fps ={30}id ="my-comp"defaultProps ={{text : 'World'}}/></>);};
tsx
import {Composition } from 'remotion';import {MyComp } from './MyComp';export constMyVideo = () => {return (<><Composition component ={MyComp }durationInFrames ={120}width ={1920}height ={1080}fps ={30}id ="my-comp"defaultProps ={{text : 'World'}}/></>);};
您的索引文件(例如remotion/index.ts
)可能如下所示:
tsx
import {registerRoot} from 'remotion';import {MyVideo} from './Video';registerRoot(MyVideo);
tsx
import {registerRoot} from 'remotion';import {MyVideo} from './Video';registerRoot(MyVideo);
请不要将这些语句合并到一个文件中,因为这样可能会破坏热重载功能。
使用 Remotion Studio
您可以使用 npx remotion studio
命令打开 Remotion Studio:
bash
npx remotion studio src/remotion/index.ts
bash
npx remotion studio src/remotion/index.ts
在 v4.0 之前,该命令是 npx remotion preview
。
我们建议在您的 package.json 中添加一个新的脚本以便轻松访问:
diff
"scripts": {+ "remotion": "remotion studio src/remotion/index.ts"}
diff
"scripts": {+ "remotion": "remotion studio src/remotion/index.ts"}
将 <Player />
添加到您的应用程序
在应用程序的任何位置,导入 <Player />
组件和您的 Composition 组件。
tsx
import {Player } from '@remotion/player';import {MyComp } from './remotion/MyComp';export constApp :React .FC = () => {return (<Player component ={MyComp }inputProps ={{text : 'World'}}durationInFrames ={120}compositionWidth ={1920}compositionHeight ={1080}fps ={30}style ={{width : 1280,height : 720,}}controls />);};
tsx
import {Player } from '@remotion/player';import {MyComp } from './remotion/MyComp';export constApp :React .FC = () => {return (<Player component ={MyComp }inputProps ={{text : 'World'}}durationInFrames ={120}compositionWidth ={1920}compositionHeight ={1080}fps ={30}style ={{width : 1280,height : 720,}}controls />);};
直接将您的 React 组件传递给 component
属性。不要传递组合列表。
如果一切正常,您现在可以运行您的 web 应用程序并预览您的视频。
为服务器端渲染创建捆绑包
在任何 Node.JS 上下文中,您可以调用 bundle()
来使用 Webpack 捆绑您的视频并在服务器端渲染视频。为此,您需要将 @remotion/bundler
添加到您的 package.json 中。
server.tsxts
importpath from 'path';import {bundle } from '@remotion/bundler';constbundled = awaitbundle (path .join (process .cwd (), 'src', 'remotion', 'index.ts'),);
server.tsxts
importpath from 'path';import {bundle } from '@remotion/bundler';constbundled = awaitbundle (path .join (process .cwd (), 'src', 'remotion', 'index.ts'),);
查看服务器端渲染以获取完整示例。
在使用 Lambda 时,您不需要这样做,您可以使用 CLI 或 deploySite()
来为您捆绑视频。