Comparison of video tags

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

• <Video /> from @remotion/media - recommended for new code, 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

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

	<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, ProRes, VP8, VP9, Vorbis	AAC, FLAC, H.264, MP3, Opus, VP8, VP9, Vorbis
HLS Support	✅ Supported	Chrome v142+, only during preview	Only during preview
CORS required	Yes	No	No
Loopable	✅	❌	✅
playbackRate (Speed Change)	✅	✅	✅
toneFrequency (Pitch Change)	Only during rendering	Only during rendering	Only during rendering
Three.js texture	Snippet - works best	useOffthreadVideoTexture()	useVideoTexture()
Client-side rendering	✅	❌	❌

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