Skip to main content

<Composition>

这是用于注册视频的组件，以使其可渲染并显示在 Remotion 开发界面的侧边栏中。

🌐 This is the component to use to register a video to make it renderable and make it show up in the sidebar of the Remotion development interface.

一个合成表示你想要创建的视频，作为剪辑的集合（例如，几个 <Sequence>），这些剪辑将按顺序播放以形成你的视频。

🌐 A composition represents the video you want to create, as a collection of clips (for example, several <Sequence>) that will play back to back to form your video.

src/Root.tsx

import {Composition} from 'remotion';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition component={Component} durationInFrames={300} width={1080} height={1080} fps={30} id="test-render" defaultProps={{}} />
      {/* Additional compositions can be rendered */}
    </>
  );
};

应用编程接口​

🌐 API

一个 <Composition /> 应该放置在根组件的片段中（该根组件是使用 registerRoot() 注册的）。

🌐 A <Composition /> should be placed within a fragment of the root component (which is registered using registerRoot()).

该组件接受以下属性：

🌐 The component takes the following props:

id​

作品的 ID，如侧栏所示，同时也是作品的唯一标识符，如果要渲染作品，你需要指定它。ID 只能包含字母、数字和 -。

🌐 ID of the composition, as shown in the sidebar and also a unique identifier of the composition that you need to specify if you want to render it. The ID can only contain letters, numbers and -.

fps​

该合成应在多少帧渲染。

🌐 At how many frames the composition should be rendered.

durationInFrames​

这部作品应该有多少帧长。

🌐 How many frames the composition should be long.

height​

作品的高度（以像素为单位）。

🌐 Height of the composition in pixels.

width​

合成宽度（像素）。

🌐 Width of the composition in pixels.

component 或 lazyComponent​

🌐 component or lazyComponent

直接传入组件 或 传入一个返回动态导入的函数。两者都不传或同时传入都是错误的。

🌐 Pass the component in directly or pass a function that returns a dynamic import. Passing neither or both of the props is an error.

note

如果你使用 lazyComponent，Remotion 将使用 React Suspense 来加载组件。组件将根据需要由 Webpack 编译，这将减少 Remotion 的启动时间。如果你使用 lazyComponent，你需要为你的组件使用默认导出。这是 React Suspense 的一个限制。

defaultProps?​

为你的组件提供默认属性。默认属性可以通过 Props 编辑器 和 输入属性 覆盖。

🌐 Give your component default props. Default props can be overriden using the Props editor and with Input Props.

Props 必须是一个仅包含纯 JSON 可序列化值的对象。 函数、类和其他不可序列化的值在渲染时将会丢失。 （此限制不适用于 <Player>，在那里你可以将函数作为 props 传递。）

🌐 Props must be an object that contains only pure JSON-serializable values.
Functions, classes, and other non-serializable values will be lost while rendering.
(This restriction does not apply to the <Player>, where you are allowed to pass functions as props.)

你还可以在默认属性中使用 Date、Map、Set 和 staticFile()，Remotion 将保证正确的序列化。

🌐 You may in addition use Date, Map, Set and staticFile() in your default props and Remotion will guarantee the proper serialization.

note

使用 React.FC<{}> 类型来编写你的组件，defaultProps 属性将是类型安全的。

note

将大型对象传递给 defaultProps 可能会很慢。了解如何避免它。

note

使用 type，而不是 interface 来输入你的 defaultProps。了解原因

calculateMetadata​

请参见：“calculateMetadata()”

🌐 See: calculateMetadata()

schema​

传入一个你的默认属性必须符合的 Zod 模式。通过这样做，你可以启用可视化编辑。参见：定义模式

🌐 Pass a Zod schema which your default props must satisfy. By doing so, you enable visual editing. See: Define a schema

使用 component 的示例​

🌐 Example using component

import {Composition} from 'remotion';
import {MyComp} from './MyComp';

export const MyVideo = () => {
  return (
    <>
      <Composition id="my-comp" component={MyComp} width={1080} height={1080} fps={30} durationInFrames={3 * 30} />
    </>
  );
};

使用 lazyComponent 的示例​

🌐 Example using lazyComponent

export const MyVideo = () => {
  return (
    <>
      <Composition id="my-comp" lazyComponent={() => import('./LazyComponent')} width={1080} height={1080} fps={30} durationInFrames={3 * 30} />
    </>
  );
};

使用文件夹整理作品​

🌐 Organize compositions using folders

你可以使用 <Folder /> 组件在侧边栏中组织你的作品。

🌐 You can use the <Folder /> component to organize your compositions in the sidebar.

import {Composition, Folder} from 'remotion';

export const Video = () => {
  return (
    <>
      <Folder name="Visuals">
        <Composition id="CompInFolder" durationInFrames={100} fps={30} width={1080} height={1080} component={Component} />
      </Folder>
      <Composition id="CompOutsideFolder" durationInFrames={100} fps={30} width={1080} height={1080} component={Component} />
    </>
  );
};

兼容性​

🌐 Compatibility

BrowsersEnvironments
Chrome
Firefox
Safari

另请参阅​

🌐 See also

Last updated on