如何使合成与我的视频持续时间相同?
如果您有一个渲染视频的组件:
MyComp.tsxtsx
importReact from "react";import {OffthreadVideo ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <OffthreadVideo src ={staticFile ("video.mp4")} />;};
MyComp.tsxtsx
importReact from "react";import {OffthreadVideo ,staticFile } from "remotion";export constMyComp :React .FC = () => {return <OffthreadVideo src ={staticFile ("video.mp4")} />;};
并且您希望使合成的持续时间与视频相同,请首先将视频源作为 React 属性:
MyComp.tsxtsx
importReact from "react";import {OffthreadVideo ,staticFile } from "remotion";typeMyCompProps = {src : string;};export constMyComp :React .FC <MyCompProps > = ({src }) => {return <OffthreadVideo src ={src } />;};
MyComp.tsxtsx
importReact from "react";import {OffthreadVideo ,staticFile } from "remotion";typeMyCompProps = {src : string;};export constMyComp :React .FC <MyCompProps > = ({src }) => {return <OffthreadVideo src ={src } />;};
然后,定义一个 calculateMetadata()
函数,根据视频计算合成的持续时间。
如有必要,请安装 @remotion/media-utils
。
MyComp.tsxtsx
import {CalculateMetadataFunction } from "remotion";import {getVideoMetadata } from "@remotion/media-utils";export constcalculateMetadata :CalculateMetadataFunction <MyCompProps > = async ({props }) => {constdata = awaitgetVideoMetadata (props .src );constfps = 30;return {durationInFrames :Math .floor (data .durationInSeconds *fps ),fps ,};};
MyComp.tsxtsx
import {CalculateMetadataFunction } from "remotion";import {getVideoMetadata } from "@remotion/media-utils";export constcalculateMetadata :CalculateMetadataFunction <MyCompProps > = async ({props }) => {constdata = awaitgetVideoMetadata (props .src );constfps = 30;return {durationInFrames :Math .floor (data .durationInSeconds *fps ),fps ,};};
最后,将 calculateMetadata
函数传递给 Composition
组件,并将先前硬编码的 src
定义为默认属性:
Root.tsxtsx
importReact from "react";import {Composition } from "remotion";import {MyComp ,calculateMetadata } from "./MyComp";export constRoot :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.tsxtsx
importReact from "react";import {Composition } from "remotion";import {MyComp ,calculateMetadata } from "./MyComp";export constRoot :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()
来根据音频文件计算合成的持续时间。