Skip to main content

<组合>

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

一个组合代表您想要创建的视频，作为一系列剪辑（例如，几个 <Sequence>），这些剪辑将依次播放以形成您的视频。

src/Root.tsx
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 */}
    </>
  );
};
src/Root.tsx
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() 注册的）。

该组件接受以下 props：

id​

组合的 ID，在侧边栏中显示，也是您需要指定的组合的唯一标识符，如果要渲染它，则需要指定 ID。ID 只能包含字母、数字和 -。

fps​

组合应该以多少帧渲染。

durationInFrames​

组合应该有多少帧长。

height​

组合的高度（以像素为单位）。

width​

组合的宽度（以像素为单位）。

component 或 lazyComponent​

直接传递组件 或 传递返回动态导入的函数。传递这两个 props 中的任何一个或两个都将导致错误。

note

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

defaultProps​

可选

为您的组件提供默认 props。默认 props 可以使用 Props 编辑器 和 Input Props 进行覆盖。

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

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

note

使用 React.FC<{}> 类型为你的组件进行类型定义，defaultProps 属性将具有类型安全性。

note

将大型对象传递给 defaultProps 可能会导致性能下降。了解如何避免。

note

使用 type 而不是 interface 来为你的 defaultProps 进行类型定义。了解原因。

calculateMetadata​

查看：calculateMetadata()

schema​

传递一个 Zod 模式，你的默认属性必须满足该模式。通过这样做，你可以启用可视化编辑。查看：定义模式

使用 component 的示例​

tsx
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}
      />
    </>
  );
};
tsx
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 的示例​

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

使用文件夹组织组合​

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

tsx
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}
      />
    </>
  );
};
tsx
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}
      />
    </>
  );
};

参见​