Chapter 245: Comparison of video tags

Core Idea

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

Key Concepts

• Using a different tag in preview and rendering

Code Examples

const OffthreadWhileRenderingRefForwardingFunction: React.FC<{
  offthreadVideoProps: RemotionOffthreadVideoProps;
  videoProps: VideoProps;
}> = ({offthreadVideoProps, videoProps}) => {
  const env = useRemotionEnvironment();

  if (!env.isRendering) {
    return <OffthreadVideo {...offthreadVideoProps} />;
  }

  return <Video {...videoProps} />;
};

• What it demonstrates: Usage pattern for Comparison of video tags from the official docs.

Reference Tables

	<Video /> <br/> <Audio /> (@remotion/media)	<OffthreadVideo />	<Html5Video /> <br/> <Html5Audio /> <br/> (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	<span style={{color: 'green', fontWeight: 'bold'}}> Fastest </span>	Fast	Medium
Supported containers	.aac, .flac, .m3u8, .mkv, .mov, .mp3, .mp4, .ogg, .wav, .webm <br/>``<br/> 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 <br/>``<br/> 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 <br/> (Speed Change)	✅, but audio pitch changes with the speed	✅, audio pitch is preserved by default	✅, audio pitch is preserved by default
toneFrequency <br/> (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	✅	❌	❌

Key Takeaways

1. Understand using a different tag in preview and rendering when working with Comparison of video tags.

Connects To

• Animatedimage: related page in the Assets & Media section.
• Delaying: related page in the Assets & Media section.
• Exporting: related page in the Assets & Media section.