Skip to main content

<OffthreadVideo>

从 Remotion 3.0.11 开始可用

此组件导入并显示视频，类似于 <Video/>，但在渲染期间，从视频中提取精确的帧并在 <Img> 标签中显示。此提取过程在浏览器外部使用 FFmpeg 进行。

此组件旨在解决默认 <Video> 元素的限制。请参见：<Video> vs <OffthreadVideo>.

示例​

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

您也可以从 URL 加载视频：

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo 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>
      <OffthreadVideo
        src={staticFile("video.webm")}
        startFrom={60}
        endAt={120}
      />
    </AbsoluteFill>
  );
};
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        src={staticFile("video.webm")}
        startFrom={60}
        endAt={120}
      />
    </AbsoluteFill>
  );
};

endAt?​

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

transparent?v4.0.0​

如果设置为 true，帧将被提取为 PNG，从而实现透明度，但也会减慢渲染速度。

如果设置为 false（默认），帧将被提取为位图（BMP），这更快。

volume?​

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

使用静态音量的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo volume={0.5} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
使用静态音量的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo volume={0.5} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
在 100 帧内逐渐增加音量的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        volume={(f) =>
          interpolate(f, [0, 100], [0, 1], { extrapolateLeft: "clamp" })
        }
        src={staticFile("video.webm")}
      />
    </AbsoluteFill>
  );
};
在 100 帧内逐渐增加音量的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        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 回调函数并将 OffthreadVideo 包装在 <Loop> 中时返回的 frame。

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

style?​

您可以传递任何您可以传递给本机 HTML 元素的样式。请记住，在渲染期间，<OffthreadVideo> 渲染一个 <Img> 标签，但在预览期间使用 <video> 标签。

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

allowAmplificationDuringRender?v3.3.17​

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

name?v4.0.71​

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

toneFrequency?v4.0.47​

调整音频的音调 - 仅在渲染期间应用。

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

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

onError?​

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

playbackRate?v2.2.0​

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

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

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

muted?​

您可以通过添加 muted 属性来消除视频的音频：

静音视频的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        muted
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </AbsoluteFill>
  );
};
静音视频的示例
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <OffthreadVideo
        muted
        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 会将音调提高 50%。

pauseWhenBuffering?v4.0.111​

如果设置为 true 并且视频正在加载，播放器将进入 本机缓冲状态。默认值为 false，但在 Remotion 5.0 中将变为 true。

toneMapped?v4.0.117​

自 Remotion 4.0.117 起，当转换为 RGB 时，Remotion 将调整不同色彩空间（如 HDR）的视频颜色，以抵消色彩偏移。
由于浏览器以 sRGB 进行绘制，这是必要的，以确保颜色显示正确。
此行为默认为 true，可以通过将 toneMapped 设置为 false 来禁用。
禁用色调映射将加快渲染速度，但可能导致颜色不那么鲜艳。

在 Remotion 4.0.117 之前，色调映射始终被禁用，并且 toneMapped 属性不可用。

showInTimeline?v4.0.122​

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

delayRenderTimeoutInMilliseconds?v4.0.150​

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

delayRenderRetries?v4.0.178​

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

onAutoPlayError?v4.0.187​

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

onVideoFrame?v4.0.190​

从视频中提取帧时调用的回调函数。
用于视频处理。
回调使用 CanvasImageSource 对象调用。
在预览期间，这是一个 HTMLVideoElement 对象，在渲染期间，它是一个 HTMLImageElement。

crossOrigin?v4.0.190​

对应于 <video> 元素的 crossOrigin 属性。
其中之一为 "anonymous"、"use-credentials" 或 undefined。
默认值：如果指定了 onVideoFrame，则为 "anonymous"，否则为 undefined。

imageFormat v3.0.22​

在 v4.0.0 中移除

可以是 jpeg 或 png。默认为 jpeg。
使用 png，可以显示透明视频（VP8、VP9、ProRes），但速度会慢大约 40%，VP8 视频速度更慢。

其他属性​

支持属性 onError、className 和 style，并传递给底层 HTML 元素。请记住，在渲染期间，这是一个 <img> 元素，在预览期间，这是一个 <video> 元素。

性能提示​

只有在需要透明度时才将 transparent 设置为 true。它比非透明帧提取慢。
如果您不关心颜色准确性，也可以将 toneMapped 设置为 false，以节省颜色转换的时间。

循环播放视频​

与 <Video> 不同，OffthreadVideo 目前不实现 loop 属性。

您可以使用以下代码片段，使用 @remotion/media-utils 来循环播放视频。

请注意，这将在浏览器中挂载一个 <video> 标签，这意味着只能使用浏览器支持的编解码器。

LoopedOffthreadVideo.tsx
tsx
import {
  Loop,
  OffthreadVideo,
  useVideoConfig,
} from "remotion";
 
export const LoopedOffthreadVideo: React.FC<{
  durationInSeconds: number | null;
  src: string;
}> = ({durationInSeconds, src}) => {
  const { fps } = useVideoConfig();
 
  if (durationInSeconds === null) {
    return null;
  }
 
  return (
    <Loop durationInFrames={Math.floor(fps * durationInSeconds)}>
      <OffthreadVideo src={src} />
    </Loop>
  );
};
LoopedOffthreadVideo.tsx
tsx
import {
  Loop,
  OffthreadVideo,
  useVideoConfig,
} from "remotion";
 
export const LoopedOffthreadVideo: React.FC<{
  durationInSeconds: number | null;
  src: string;
}> = ({durationInSeconds, src}) => {
  const { fps } = useVideoConfig();
 
  if (durationInSeconds === null) {
    return null;
  }
 
  return (
    <Loop durationInFrames={Math.floor(fps * durationInSeconds)}>
      <OffthreadVideo src={src} />
    </Loop>
  );
};
Root.tsx
tsx
import React, { useState } from "react";
import { Composition, staticFile } from "remotion";
import { getVideoMetadata } from "@remotion/media-utils";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition 
      id="MyComp"
      component={LoopedOffthreadVideo}
      defaultProps={{
        durationInSeconds: null,
        src: staticFile("myvideo.mp4"),
      }}
      calculateMetadata={async ({props}) => {
        const { durationInSeconds, width, height } = await getVideoMetadata(props.src);
        const fps = 30;
 
        return {
          // Set any duration, here as an example, we loop the video 5 times
          durationInFrames: Math.floor(durationInSeconds * fps * 5),
          fps,
          width,
          height,
          props: {
            ...props,
            // Pass the durationInSeconds as prop to the React component
            durationInSeconds,
          }
        };
      }}
    />
  )
}
Root.tsx
tsx
import React, { useState } from "react";
import { Composition, staticFile } from "remotion";
import { getVideoMetadata } from "@remotion/media-utils";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition 
      id="MyComp"
      component={LoopedOffthreadVideo}
      defaultProps={{
        durationInSeconds: null,
        src: staticFile("myvideo.mp4"),
      }}
      calculateMetadata={async ({props}) => {
        const { durationInSeconds, width, height } = await getVideoMetadata(props.src);
        const fps = 30;
 
        return {
          // Set any duration, here as an example, we loop the video 5 times
          durationInFrames: Math.floor(durationInSeconds * fps * 5),
          fps,
          width,
          height,
          props: {
            ...props,
            // Pass the durationInSeconds as prop to the React component
            durationInSeconds,
          }
        };
      }}
    />
  )
}

<OffthreadVideo> 支持的编解码器​

<OffthreadVideo> 可以读取以下编解码器：

  • H.264（"MP4"）
  • H.265（"HEVC"）
  • VP8 和 VP9（"WebM"）
  • AV1（从 v4.0.6 开始）
  • ProRes

参见​