<Video>

note

这是新 <Video> 标签的文档。不要将其与来自 remotion 的旧 <Html5Video> / <Video> 标签混淆。

该组件导入并显示视频，类似于 <OffthreadVideo/>，但在渲染过程中，使用 Mediabunny 从视频中提取精确的帧，并将其显示在 <canvas> 标签中。

🌐 This component imports and displays a video, similar to <OffthreadVideo/> but during rendering, extracts the exact frame from the video using Mediabunny and displays it in a <canvas> tag.

该组件默认启用了本地缓冲支持。在播放器中使用时，它会在缓冲时自动暂停播放，并在准备好后恢复播放。

🌐 This component has native buffering support enabled by default. When used in the Player, it automatically pauses playback when buffering and resumes when ready.

示例

🌐 Example

import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

你也可以从 URL 加载视频：

🌐 You can load a video from an URL as well:

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src="https://remotion.media/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

属性

🌐 Props

`src`

要渲染的视频的 URL。可以是远程 URL，也可以是通过 staticFile() 引用的本地文件。

🌐 The URL of the video to be rendered. Can be a remote URL or a local file referenced with staticFile().

`trimBefore?`

将删除视频开头（左侧）的一部分。

🌐 Will remove a portion of the video at the beginning (left side).

在以下示例中，我们假设该组成部分的fps是30。

🌐 In the following example, we assume that the fps of the composition is 30.

传入 trimBefore={60} 时，播放将立即开始，但视频的前 2 秒会被剪掉。传入 trimAfter={120} 时，文件中 4 秒之后的任何视频都会被剪掉。

🌐 By passing trimBefore={60}, the playback starts immediately, but with the first 2 seconds of the video trimmed away.
By passing trimAfter={120}, any video after the 4 second mark in the file will be trimmed away.

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

🌐 The video will play the range from 00:02:00 to 00:04:00, meaning the video will play for 2 seconds.

有关确切行为，请参见：运算顺序。

🌐 For exact behavior, see: Order of operations.

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};

`trimAfter?`

移除视频末尾（右侧）的一部分。有关说明，请参见 trimBefore。

🌐 Removes a portion of the video at the end (right side). See trimBefore for an explanation.

`volume?`

允许你控制音频的整体音量或逐帧音量。
阅读关于使用音频的页面以了解更多信息。

🌐 Allows you to control the volume of the audio in it's entirety or frame by frame.
Read the page on using audio to learn more.

Setting a static volume
import {AbsoluteFill, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={0.5} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

Changing the volume over time
import {AbsoluteFill, interpolate, staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};

`name?`

一个名称，将显示为 Remotion Studio 时间线中序列的标签。此属性纯粹是为了帮助你在时间线上跟踪项目。

🌐 A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.

`onError?`v4.0.404

处理视频处理中发生的错误。回调接收一个 Error 属性，并应返回 'fallback' 或 'fail'。

🌐 Handle errors that occur during video processing. The callback receives an Error property and should return either 'fallback' or 'fail'.

返回 'fallback' 以回退到 <OffthreadVideo>（默认行为）
返回 'fail' 以立即使渲染失败

import {staticFile} from 'remotion';
import {Video} from '@remotion/media';

export const MyVideo = () => {
  return (
    <Video
      src={'https://remotion.media/video.mp4'}
      onError={(error) => {
        console.log('Video error:', error.message);

        // Return 'fail' to fail the render, or 'fallback' to use <OffthreadVideo>
        return 'fallback';
      }}
    />
  );
};

note

在客户端渲染中，无论返回值如何，渲染总会失败。
如果你返回 'fallback'，组件将回退到 <OffthreadVideo>，该组件可能通过 fallbackOffthreadVideoProps.onError 具有自己的错误处理。

`playbackRate?`v4.0.354

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

🌐 Controls the speed of the video. 1 is the default and means regular speed, 0.5 slows down the video so it's twice as long and 2 speeds up the video so it's twice as fast.

Example of a video playing twice as fast
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video playbackRate={2} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};

note

不支持倒放视频。

`muted?`

你可以通过添加一个 muted 属性来去掉视频的音频：

🌐 You can drop the audio of the video by adding a muted prop:

Example of a muted video
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video muted src="https://remotion.media/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

`style?`

你可以传递任何可以传递给原生 HTML <canvas> 元素的样式。

🌐 You can pass any style you can pass to a native HTML <canvas> element.

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

`loop?`

使视频无限循环。

🌐 Makes the video loop indefinitely.

Example of a looped video
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video loop src="https://remotion.media/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

note

当视频结束时（并且未设置 loop），视频的最后一帧默认保持可见。这与 <Html5Video> 的行为一致。

`loopVolumeCurveBehavior?`v4.0.354

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

🌐 Controls the frame which is returned when using the volume callback function and adding the loop attribute.

可以是 "repeat"（默认，每次迭代从 0 开始）或 "extend"（保持帧数递增）。

🌐 Can be either "repeat" (default, start from 0 on each iteration) or "extend" (keep increasing frames).

`showInTimeline?`

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

🌐 If set to false, no layer will be shown in the timeline of the Remotion Studio. The default is true.

`delayRenderTimeoutInMilliseconds?`

自定义此组件进行的 delayRender() 调用的超时设置。

🌐 Customize the timeout of the delayRender() call that this component makes.

`delayRenderRetries?`

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

🌐 Customize the number of retries of the delayRender() call that this component makes.

`onVideoFrame?`

当从视频中提取帧时会调用的回调函数。适用于视频处理。回调函数会传入一个CanvasImageSource对象，更具体地说，是ImageBitmap或VideoFrame之一。

🌐 A callback function that gets called when a frame is extracted from the video.
Useful for video manipulation.
The callback is called with a CanvasImageSource object, more specifically, either an ImageBitmap or a VideoFrame.

`audioStreamIndex?`

选择要使用的音频流。默认是 0。

🌐 Select the audio stream to use. The default is 0.

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
    </AbsoluteFill>
  );
};

`toneFrequency?`

接受介于 0.01 和 2 之间的数字，其中 1 表示原始音高。小于 1 的值会降低音高，而大于 1 的值会提高音高。

🌐 Accepts a number between 0.01 and 2, where 1 represents the original pitch. Values less than 1 will decrease the pitch, while values greater than 1 will increase it.

0.5 的 toneFrequency 会将音高降低一半，而 toneFrequency 为 1.5 会将音高提高 50%。

🌐 A toneFrequency of 0.5 would lower the pitch by half, and a toneFrequency of 1.5 would increase the pitch by 50%.

该值在视频标签挂载的整个时间内必须保持不变。

🌐 The value must stay the same across the entire time the video tag is mounted.

warning

仅在服务器端渲染中有效。目前在预览或客户端渲染中无效。

`headless?`v4.0.387

不挂载 <canvas>，但仍然允许你使用 onVideoFrame 属性。
这对于在 Three.js 中将视频嵌入为纹理非常有用。

🌐 Does not mount a <canvas>, but still allows you to use the onVideoFrame prop.
This is useful for embedding a video as a texture in Three.js.

`fallbackOffthreadVideoProps?`

当发生 fallback to <OffthreadVideo> 时，该属性允许你将 props 传递给回退的 <OffthreadVideo> 组件。
这里只需要指定那些 @remotion/media 的 <Video> 不支持的 props——适用于两个标签的 props 会自动转发，无需在这里指定。

🌐 When a fallback to <OffthreadVideo> happens, this prop allows you to pass props to the fallback <OffthreadVideo> component.
Only props that are not supported by <Video> from @remotion/media need to be specified here - props that apply for both tags will automatically be forwarded and do not need to be specified here.

note

在使用 @remotion/web-renderer 进行客户端渲染时，此属性不起作用，因为无法进行回退。请参阅在客户端渲染中无法回退。

`disallowFallbackToOffthreadVideo?`v3.0.356

默认情况下，如果无法使用此标签嵌入视频，将尝试回退到 <OffthreadVideo>。

🌐 By default, if the video cannot be embedded using this tag, a fallback to <OffthreadVideo> will be attempted.

传递这个属性以禁用回退，而是让渲染失败。

🌐 Pass this prop to disable the fallback and fail the render instead.

note

在使用 @remotion/web-renderer 进行客户端渲染时，如果视频无法嵌入，回退是不可能的，渲染将始终失败。请参阅客户端渲染中无法回退。

`debugOverlay?`

在视频上显示调试叠加层。这对于调试视频播放很有用。

🌐 Shows a debug overlay on the video. This is useful for debugging the video playback.

另请参阅

🌐 See also

示例​

属性​

src​

trimBefore?​

trimAfter?​

volume?​

name?​

onError?v4.0.404​

playbackRate?v4.0.354​

muted?​

style?​

loop?​

loopVolumeCurveBehavior?v4.0.354​

showInTimeline?​

delayRenderTimeoutInMilliseconds?​

delayRenderRetries?​

onVideoFrame?​

audioStreamIndex?​

toneFrequency?​

headless?v4.0.387​

fallbackOffthreadVideoProps?​

acceptableTimeShiftInSeconds?​

transparent?​

toneMapped?​

onError?​

crossOrigin?​

useWebAudioApi?​

pauseWhenBuffering?​

onAutoPlayError?​

disallowFallbackToOffthreadVideo?v3.0.356​

debugOverlay?​

另请参阅​

示例

属性

`src`

`trimBefore?`

`trimAfter?`

`volume?`

`name?`

`onError?`v4.0.404

`playbackRate?`v4.0.354

`muted?`

`style?`

`loop?`

`loopVolumeCurveBehavior?`v4.0.354

`showInTimeline?`

`delayRenderTimeoutInMilliseconds?`

`delayRenderRetries?`

`onVideoFrame?`

`audioStreamIndex?`

`toneFrequency?`

`headless?`v4.0.387

`fallbackOffthreadVideoProps?`

`acceptableTimeShiftInSeconds?`

`transparent?`

`toneMapped?`

`onError?`

`crossOrigin?`

`useWebAudioApi?`

`pauseWhenBuffering?`

`onAutoPlayError?`

`disallowFallbackToOffthreadVideo?`v3.0.356

`debugOverlay?`

另请参阅