Comparison of video tags

For new code, use <Video /> from @remotion/media. It is the recommended component for embedding videos into a Remotion composition.

The available video components are:

• <Video /> from @remotion/media - based on Mediabunny and WebCodecs
• <OffthreadVideo /> from remotion - based on a Rust-based frame extractor
• <Html5Video /> from remotion (previously named <Video>) - based on the HTML5 <video> element

For audio, use <Audio /> from @remotion/media for new code. During server-side rendering, <Video> may fall back to <OffthreadVideo>, and <Audio> may fall back to <Html5Audio /> for unsupported media. See Fallback behavior.

The comparison below shows when a fallback or alternative may be relevant.

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

playbackRate changes the media speed with all three components. In the Mediabunny and WebCodecs path used by <Video> and <Audio> from @remotion/media, it also changes the audio pitch. Pitch-preserving speed changes are not currently supported by this path during preview, server-side rendering, or client-side rendering.

<OffthreadVideo>, <Html5Video>, and <Html5Audio> preserve audio pitch by default during preview and server-side rendering. If @remotion/media falls back to one of these components, the fallback component's behavior applies.

Using a different tag in preview and rendering

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} />;
};