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	No	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

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

Using a different tag in preview and rendering​

Using a different tag in preview and rendering