Comparison of video tags

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

• <OffthreadVideo /> - our recommendation, based on a Rust-based frame extractor
• <Video /> from remotion - based on the HTML5 <video> element
• <Video /> from @remotion/media - an experimental WebCodecs-based component, set to become the default

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

	<OffthreadVideo />	<Video /> <Audio /> (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>	HTML5 <video> Soon: 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
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	No	Only during preview	Planned
CORS required	No	No	Yes
Loopable	❌	✅	✅
playbackRate (Speed Change)	✅	✅	Planned
toneFrequency (Pitch Change)	Only during rendering	Only during rendering	Planned

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
tsx
import {useRemotionEnvironment, OffthreadVideo, RemotionOffthreadVideoProps} from 'remotion';
import {experimental_Video as 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} />;
};