Skip to main content

<视频>

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

info

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

API​

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

所有原生 <video> 元素接受的属性（除了 autoplay 和 controls）将被转发（但当然并非所有对 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?​

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

在以下示例中，我们假设合成的 fps 为 30。

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

视频将播放从 00:02:00 到 00: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上，无法精细地更改媒体标签的音量。
浏览器只会尊重值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 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​

在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无需下载视频并使渲染更加高效。

编解码器支持​

请参阅：Remotion支持哪些视频格式？

替代方案：<OffthreadVideo>​

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

另请参阅​