<视频>
将原生<video>
元素包装起来,以在您的组件中包含与 Remotion 时间同步的视频。
建议使用<OffthreadVideo>
,在渲染期间更快且支持更多编解码器。
API
将视频文件放入 public/
文件夹 并使用 staticFile()
引用它。
所有原生 <video>
元素接受的属性(除了 autoplay
和 controls
)将被转发(但当然并非所有对 Remotion 有用)。这意味着您可以使用所有 CSS 样式化视频。
tsx
import {AbsoluteFill ,staticFile ,Video } from "remotion";export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")} /></AbsoluteFill >);};
tsx
import {AbsoluteFill ,staticFile ,Video } from "remotion";export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")} /></AbsoluteFill >);};
您也可以从 URL 加载视频:
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" /></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" /></AbsoluteFill >);};
属性
src
要渲染的视频的 URL。可以是远程 URL 或使用 staticFile()
引用的本地文件。
startFrom?
将在视频开头删除一部分。
在以下示例中,我们假设合成的 fps
为 30
。
通过传递 startFrom={60}
,播放立即开始,但视频的前 2 秒将被裁剪掉。
通过传递 endAt={120}
,文件中 4 秒标记后的任何视频将被裁剪掉。
视频将播放从 00:02:00
到 00:04:00
的范围,这意味着视频将播放 2 秒。
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}startFrom ={60}endAt ={120} /></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}startFrom ={60}endAt ={120} /></AbsoluteFill >);};
endAt?
在视频结尾删除一部分。请参阅 startFrom
以获取解释。
style?
您可以传递任何可以传递给原生 <video>
元素的样式。例如,设置其大小:
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}style ={{height : 720,width : 1280 }}/></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}style ={{height : 720,width : 1280 }}/></AbsoluteFill >);};
volume?
允许您控制整个轨道的音量或根据每帧更改音量。请参阅使用音频指南以了解如何使用它。
使用静态音量的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={0.5}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
使用静态音量的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={0.5}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
100帧的逐渐增加示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={(f ) =>interpolate (f , [0, 100], [0, 1], {extrapolateLeft : "clamp" })}src ={staticFile ("video.webm")}/></AbsoluteFill >);};
100帧的逐渐增加示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={(f ) =>interpolate (f , [0, 100], [0, 1], {extrapolateLeft : "clamp" })}src ={staticFile ("video.webm")}/></AbsoluteFill >);};
在iOS Safari上,无法精细地更改媒体标签的音量。
浏览器只会尊重值0
和1
。
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 constMyComposition = () => {return (<AbsoluteFill ><Video playbackRate ={2}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
视频以两倍速播放的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video playbackRate ={2}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
muted?
通过添加muted
属性可以消除视频的音频:
静音视频的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video muted src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
静音视频的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video muted src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
这样做的好处是Remotion在渲染期间不必下载视频文件以从中提取音频。
loop?
v3.2.29
使视频无限循环播放。
循环播放视频的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video loop src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
循环播放视频的示例tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video loop src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
acceptableTimeShiftInSeconds?
v3.2.42
在Studio或Remotion Player中,如果视频与Remotion内部时间严重不同步(可能是由于视频加载或页面无法实时跟上),Remotion会寻找视频。默认情况下,如果遇到0.45
秒的时间偏移,将触发一次寻找。使用此属性,您可以自定义阈值。```
allowAmplificationDuringRender?
v3.3.17
使volume
大于1
的值在渲染过程中产生放大效果。
在预览期间,音量将被限制为1
,因为浏览器无法放大音频。
toneFrequency?
v4.0.47
调整音频的音调 - 仅在渲染过程中应用。
接受介于0.01
和2
之间的数字,其中1
代表原始音调。小于1
的值将降低音调,而大于1
的值将增加音调。
toneFrequency
为0.5将使音调降低一半,而1.5
的toneFrequency
将使音调增加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无需下载视频并使渲染更加高效。
编解码器支持
替代方案:<OffthreadVideo>
<OffthreadVideo>
是<Video>
的一个可替换选项。要决定使用哪个标签,请参阅:<Video>
vs <OffthreadVideo>