Skip to main content

如何使合成与我的视频持续时间相同？

如果您有一个渲染视频的组件：

MyComp.tsx
tsx
import React from "react";
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("video.mp4")} />;
};
MyComp.tsx
tsx
import React from "react";
import { OffthreadVideo, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile("video.mp4")} />;
};

并且您希望使合成的持续时间与视频相同，请首先将视频源作为 React 属性：

MyComp.tsx
tsx
import React from "react";
import { OffthreadVideo, staticFile } from "remotion";
 
type MyCompProps = {
  src: string;
};
 
export const MyComp: React.FC<MyCompProps> = ({ src }) => {
  return <OffthreadVideo src={src} />;
};
MyComp.tsx
tsx
import React from "react";
import { OffthreadVideo, staticFile } from "remotion";
 
type MyCompProps = {
  src: string;
};
 
export const MyComp: React.FC<MyCompProps> = ({ src }) => {
  return <OffthreadVideo src={src} />;
};

然后，定义一个 calculateMetadata() 函数，根据视频计算合成的持续时间。
如有必要，请安装 @remotion/media-utils。

MyComp.tsx
tsx
import { CalculateMetadataFunction } from "remotion";
import { getVideoMetadata } from "@remotion/media-utils";
 
export const calculateMetadata: CalculateMetadataFunction<
  MyCompProps
> = async ({ props }) => {
  const data = await getVideoMetadata(props.src);
  const fps = 30;
 
  return {
    durationInFrames: Math.floor(data.durationInSeconds * fps),
    fps,
  };
};
MyComp.tsx
tsx
import { CalculateMetadataFunction } from "remotion";
import { getVideoMetadata } from "@remotion/media-utils";
 
export const calculateMetadata: CalculateMetadataFunction<
  MyCompProps
> = async ({ props }) => {
  const data = await getVideoMetadata(props.src);
  const fps = 30;
 
  return {
    durationInFrames: Math.floor(data.durationInSeconds * fps),
    fps,
  };
};

最后，将 calculateMetadata 函数传递给 Composition 组件，并将先前硬编码的 src 定义为默认属性：

Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComp, calculateMetadata } from "./MyComp";
 
export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComp}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};
Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComp, calculateMetadata } from "./MyComp";
 
export const Root: React.FC = () => {
  return (
    <Composition
      id="MyComp"
      component={MyComp}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{
        src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      }}
      calculateMetadata={calculateMetadata}
    />
  );
};

如何使合成与我的音频持续时间相同？​

按照相同的步骤，但是使用 getAudioDurationInSeconds() 从 @remotion/media-utils 而不是 getVideoMetadata() 来根据音频文件计算合成的持续时间。

参见​