Skip to main content

将视频嵌入到 Remotion 中

你可以使用 <OffthreadVideo> 组件将现有视频嵌入到 Remotion 中。

🌐 You can embed existing videos into Remotion by using the <OffthreadVideo> component.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src="https://remotion.media/BigBuckBunny.mp4" />;
};

使用本地文件​

🌐 Using a local file

将文件放入 public 文件夹 并使用 staticFile() 引用它。

🌐 Put a file into the public folder and reference it using staticFile().

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} />;
};

修剪​

🌐 Trimming

通过使用 trimBefore 属性，你可以删除视频的前几秒。 在下面的示例中，视频的前两秒会被跳过（假设合成的 FPS 为 30）。

🌐 By using the trimBefore prop, you can remove the first few seconds of the video.
In the example below, the first two seconds of the video are skipped (assuming a composition FPS of 30).

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} />;
};

同样，你可以使用trimAfter来剪辑视频的结尾。

🌐 Similarly, you can use trimAfter to trim the end of the video.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} trimAfter={120} />;
};

拖延​

🌐 Delaying

使用 <Sequence> 组件来延迟视频的出现。
在下面的示例中，视频将在第 60 帧开始播放。

🌐 Use the <Sequence> component to delay the appearance of a video.
In the example below, the video will start playing at frame 60.

import React from 'react';
import {OffthreadVideo, staticFile, Sequence} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Sequence from={60}>
      <OffthreadVideo src={staticFile('video.mp4')} />
    </Sequence>
  );
};

尺寸和位置​

🌐 Size and Position

你可以使用 CSS 来调整视频的大小和位置。 你会发现属性 width、height、position、left、top、right、bottom、margin、aspectRatio 和 objectFit 非常有用。

🌐 You can size and position the video using CSS.
You'll find the properties width, height, position, left, top, right, bottom, margin, aspectRatio and objectFit useful.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('video.mp4')}
      style={{
        width: 640,
        height: 360,
        position: 'absolute',
        top: 100,
        left: 100,
      }}
    />
  );
};

音量​

🌐 Volume

你可以使用 volume 属性来设置视频的音量。

🌐 You can set the volume of the video using the volume prop.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} volume={0.5} />;
};

你也可以使用 muted 属性来静音视频。

🌐 You can also mute a video using the muted prop.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} muted />;
};

请参阅 使用音频 了解更多控制音量的方法。

🌐 See Using Audio for more ways you can control volume.

速度​

🌐 Speed

你可以使用 playbackRate 属性来改变视频的播放速度。

🌐 You can use the playbackRate prop to change the speed of the video.

import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} playbackRate={2} />;
};

这只在速度恒定时有效。另请参见：随时间改变视频速度。

🌐 This only works if the speed is constant. See also: Changing the speed of a video over time.

循环​

🌐 Looping

参见：循环 <OffthreadVideo>

🌐 See: Looping an <OffthreadVideo>

动图​

🌐 GIFs

参见：使用 GIF

🌐 See: Using GIFs

另请参阅​

🌐 See also

Last updated on