视频标签比较

我们提供三个组件，用于将视频嵌入到你的 Remotion 组合中：

🌐 We offer three components for embedding videos into your Remotion composition:

• <OffthreadVideo /> - 我们的推荐，基于 Rust 的帧提取器
• <Html5Video /> 来自 remotion（以前名为 <Video>）- 基于 HTML5 <video> 元素
• <Video /> 来自 @remotion/media - 一个基于实验性 WebCodecs 的组件，预计将成为默认选项

此页面提供了一个比较，帮助你决定使用哪个标签。

🌐 This page offers a comparison to help you decide which tag to use.

	<OffthreadVideo />	<Html5Video /> <Html5Audio /> (remotion)	<Video /> <Audio /> (@remotion/media)
Based on	Rust + FFmpeg binary	HTML5 <video> tag	Mediabunny, WebCodecs
Frame-perfect	✅	❌ Not guaranteed	✅
Partial download of asset	❌	Only with muted prop	✅
Preview	HTML5 <video>	HTML5 <video>	WebCodecs
Render Speed	Fast	Medium	Fastest
Supported containers	.aac, .avi, .caf, .flac, .flv, .m4a, .mkv, .mp3, .mp4, .ogg, .wav, .webm	.aac, .flac, .m4a, .mkv, .mp3, .mp4, .ogg, .wav, .webm	.aac, .flac, .mkv, .mov, .mp3, .mp4, .ogg, .wav, .webm Fallback to <OffthreadVideo> for unsupported containers
Supported codecs	AAC, AC3, AV1, FLAC, H.264, H.265, M4A, MP3, Opus, PCM, ProRes, VP8, VP9, Vorbis	AAC, FLAC, H.264, MP3, Opus, VP8, VP9, Vorbis	AAC, FLAC, H.264, MP3, Opus, VP8, VP9, Vorbis Fallback to <OffthreadVideo> for unsupported codecs
HLS Support	Chrome v142+	Only during preview	Planned
CORS required	No	No	Yes
Loopable	❌	✅	✅
playbackRate (Speed Change)	✅	✅	✅
toneFrequency (Pitch Change)	Only during rendering	Only during rendering	Only during rendering
Three.js texture	useOffthreadVideoTexture()	useVideoTexture()	Snippet - works best
Client-side rendering	❌	❌	✅

在预览和渲染中使用不同的标签

🌐 Using a different tag in preview and rendering

使用 useRemotionEnvironment() 钩子在预览和渲染中呈现不同的组件。

🌐 Use the useRemotionEnvironment() hook to render a different component in preview and rendering.

OffthreadVideo during preview, @remotion/media during rendering
import {useRemotionEnvironment, OffthreadVideo, RemotionOffthreadVideoProps} from 'remotion';
import {Video, VideoProps} from '@remotion/media';

const OffthreadWhileRenderingRefForwardingFunction: React.FC<{
  offthreadVideoProps: RemotionOffthreadVideoProps;
  videoProps: VideoProps;
}> = ({offthreadVideoProps, videoProps}) => {
  const env = useRemotionEnvironment();

  if (!env.isRendering) {
    return <OffthreadVideo {...offthreadVideoProps} />;
  }

  return <Video {...videoProps} />;
};

相同的模式也适用于音频：

🌐 The same pattern works for audio:

Html5Audio during preview, @remotion/media during rendering
import {useRemotionEnvironment, Html5Audio, RemotionAudioProps} from 'remotion';
import {Audio, AudioProps} from '@remotion/media';

const Html5AudioWhilePreviewingComponent: React.FC<{
  html5AudioProps: RemotionAudioProps;
  audioProps: AudioProps;
}> = ({html5AudioProps, audioProps}) => {
  const env = useRemotionEnvironment();

  if (!env.isRendering) {
    return <Html5Audio {...html5AudioProps} />;
  }

  return <Audio {...audioProps} />;
};