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
• <Html5Video /> from remotion (previously named <Video>) - 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 />	<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

Use the useRemotionEnvironment() hook to render a different component in preview and 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:

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