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() 来根据音频文件计算合成的持续时间。

参见