Skip to main content

<视频>

将原生<video>元素包装起来,以在您的组件中包含与 Remotion 时间同步的视频。

info

建议使用<OffthreadVideo>,在渲染期间更快且支持更多编解码器。

API

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

所有原生 <video> 元素接受的属性(除了 autoplaycontrols)将被转发(但当然并非所有对 Remotion 有用)。这意味着您可以使用所有 CSS 样式化视频。

tsx
import { AbsoluteFill, staticFile, Video } from "remotion";
 
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src={staticFile("video.webm")} />
</AbsoluteFill>
);
};
tsx
import { AbsoluteFill, staticFile, Video } from "remotion";
 
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src={staticFile("video.webm")} />
</AbsoluteFill>
);
};

您也可以从 URL 加载视频:

tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
</AbsoluteFill>
);
};
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
</AbsoluteFill>
);
};

属性

src

要渲染的视频的 URL。可以是远程 URL 或使用 staticFile() 引用的本地文件。

startFrom?

将在视频开头删除一部分。

在以下示例中,我们假设合成的 fps30

通过传递 startFrom={60},播放立即开始,但视频的前 2 秒将被裁剪掉。
通过传递 endAt={120},文件中 4 秒标记后的任何视频将被裁剪掉。

视频将播放从 00:02:0000:04:00 的范围,这意味着视频将播放 2 秒。

tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src={staticFile("video.webm")} startFrom={60} endAt={120} />
</AbsoluteFill>
);
};
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video src={staticFile("video.webm")} startFrom={60} endAt={120} />
</AbsoluteFill>
);
};

endAt?

在视频结尾删除一部分。请参阅 startFrom 以获取解释。

style?

您可以传递任何可以传递给原生 <video> 元素的样式。例如,设置其大小:

tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
src={staticFile("video.webm")}
style={{ height: 720, width: 1280 }}
/>
</AbsoluteFill>
);
};
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
src={staticFile("video.webm")}
style={{ height: 720, width: 1280 }}
/>
</AbsoluteFill>
);
};

volume?

允许您控制整个轨道的音量或根据每帧更改音量。请参阅使用音频指南以了解如何使用它。

使用静态音量的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video volume={0.5} src={staticFile("video.webm")} />
</AbsoluteFill>
);
};
使用静态音量的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video volume={0.5} src={staticFile("video.webm")} />
</AbsoluteFill>
);
};
100帧的逐渐增加示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
volume={(f) =>
interpolate(f, [0, 100], [0, 1], { extrapolateLeft: "clamp" })
}
src={staticFile("video.webm")}
/>
</AbsoluteFill>
);
};
100帧的逐渐增加示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
volume={(f) =>
interpolate(f, [0, 100], [0, 1], { extrapolateLeft: "clamp" })
}
src={staticFile("video.webm")}
/>
</AbsoluteFill>
);
};
note

在iOS Safari上,无法精细地更改媒体标签的音量。
浏览器只会尊重值01

loopVolumeCurveBehavior?v4.0.142

控制在使用volume回调函数并添加loop属性时返回的frame

可以是"repeat"(默认值,在每次迭代时从0开始)或"extend"(保持增加帧)。

name?v4.0.71

在Remotion Studio的时间轴中显示为序列标签的名称。此属性纯粹是为了帮助您在时间轴中跟踪项目。

playbackRate?v2.2.0

控制视频的速度。1是默认值,表示正常速度,0.5会减慢视频速度,使其变为原来的两倍长,2会加快视频速度,使其变为原来的两倍快。

虽然Remotion不限制可能的播放速度范围,在开发模式下使用HTMLMediaElement.playbackRate API,对于极端值会抛出错误。在撰写本文时,Google Chrome在播放速率低于0.0625或高于16时会抛出异常。

视频以两倍速播放的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video playbackRate={2} src={staticFile("video.webm")} />
</AbsoluteFill>
);
};
视频以两倍速播放的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video playbackRate={2} src={staticFile("video.webm")} />
</AbsoluteFill>
);
};

muted?

通过添加muted属性可以消除视频的音频:

静音视频的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
muted
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
/>
</AbsoluteFill>
);
};
静音视频的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
muted
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
/>
</AbsoluteFill>
);
};

这样做的好处是Remotion在渲染期间不必下载视频文件以从中提取音频。

loop?v3.2.29

使视频无限循环播放。

循环播放视频的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
loop
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
/>
</AbsoluteFill>
);
};
循环播放视频的示例
tsx
export const MyComposition = () => {
return (
<AbsoluteFill>
<Video
loop
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
/>
</AbsoluteFill>
);
};

acceptableTimeShiftInSeconds?v3.2.42

StudioRemotion Player中,如果视频与Remotion内部时间严重不同步(可能是由于视频加载或页面无法实时跟上),Remotion会寻找视频。默认情况下,如果遇到0.45秒的时间偏移,将触发一次寻找。使用此属性,您可以自定义阈值。```

allowAmplificationDuringRender?v3.3.17

使volume大于1的值在渲染过程中产生放大效果。
在预览期间,音量将被限制为1,因为浏览器无法放大音频。

toneFrequency?v4.0.47

调整音频的音调 - 仅在渲染过程中应用。

接受介于0.012之间的数字,其中1代表原始音调。小于1的值将降低音调,而大于1的值将增加音调。

toneFrequency为0.5将使音调降低一半,而1.5toneFrequency将使音调增加50%。

onError?

处理播放视频时出现的错误。从v3.3.89开始,如果传递了onError回调,则不会抛出异常。以前,无法捕获错误。

pauseWhenBuffering?v4.0.100

如果设置为true并且视频正在加载,则播放器将进入native buffering state。默认值为false,但在Remotion 5.0中将变为true

showInTimeline?v4.0.122

如果设置为false,则不会在Remotion Studio的时间轴中显示任何图层。默认值为true

delayRenderTimeoutInMilliseconds?v4.0.140

自定义此组件调用的delayRender()超时

delayRenderRetries?v4.0.140

自定义此组件调用的delayRender()重试次数

onAutoPlayError?v4.0.187

当由于自动播放限制而无法播放视频时调用的回调函数。
如果不传递回调,则视频将被静音并重试一次。
如果要自行处理错误,例如暂停播放器,则此属性很有用。
在此处阅读有关自动播放限制的更多信息。

onVideoFrame?v4.0.190

当从视频中提取帧时调用的回调函数。
对于视频处理很有用。
回调函数将使用CanvasImageSource对象调用。
当您使用<Video>标签时,它始终是一个HTMLVideoElement对象。

crossOrigin?v4.0.190

对应于<video>元素的crossOrigin属性。
可以是"anonymous""use-credentials"undefined之一。
默认值:如果指定了onVideoFrame,则为"anonymous",否则为undefined

通过静音音频加速视频渲染

Remotion将在渲染过程中下载整个视频以混合其音频。如果视频包含一个静音音轨,您可以添加muted属性,以告知Remotion无需下载视频并使渲染更加高效。

编解码器支持

请参阅:Remotion支持哪些视频格式?

替代方案:<OffthreadVideo>

<OffthreadVideo><Video>的一个可替换选项。要决定使用哪个标签,请参阅:<Video> vs <OffthreadVideo>

另请参阅