Video Playback Components in Remotion: A Complete Guide to `<Video>`, `<OffthreadVideo>`, and Internal Renderers

Remotion provides multiple React video playback components including <Video> for standard playback, <OffthreadVideo> for high-performance off-thread decoding, and internal components like <VideoForRendering> and <VideoForPreview> that handle frame extraction during export and studio preview.

The Remotion framework offers a sophisticated ecosystem of video playback components designed for different rendering contexts. Whether you are building compositions for client-side preview or server-side rendering, understanding these components is essential for optimizing performance. This guide examines each video playback component in Remotion, their specific use cases, and how they interact within the rendering pipeline.

Core Video Playback Components in Remotion

<Video>: The Standard Playback Component

The <Video> component serves as the primary public API for embedding video content in Remotion compositions. Located in packages/media/src/video/video.tsx, this component renders a standard HTML <video> element while providing Remotion-specific functionality.

The component accepts comprehensive playback-related props including src, startFrom, endAt, playbackRate, muted, and loop. It automatically handles browser compatibility issues by implementing fallback logic to <OffthreadVideo> when the browser cannot decode the source format.

import {Video} from '@remotion/media';

export const MyComp = () => {
  return (
    <Video
      src="https://remotion.dev/static/big-buck-bunny.mp4"
      startFrom={30}
      endAt={45}
      playbackRate={1.5}
      muted
      loop={false}
    />
  );
};

<Html5Video>: Deprecated Legacy Alias

The <Html5Video> component exists as a legacy alias maintained for backward compatibility. Located in the same file as <Video> (packages/media/src/video/video.tsx at line 195), this component is now deprecated and simply forwards all props to <Video> while emitting a console warning.

import {Html5Video} from '@remotion/media';

export const LegacyComp = () => (
  <Html5Video src="my-video.mp4" />
);

<OffthreadVideo>: High-Performance Off-Thread Decoding

The <OffthreadVideo> component provides high-performance video decoding using the WebCodecs API, processing frames off the main UI thread. This component is essential for handling large or high-resolution videos, particularly during server-side rendering scenarios.

The public API is exported from packages/media/src/video/video.tsx, while the core implementation resides in packages/core/src/video/OffthreadVideo.tsx. The component exposes advanced configuration options including cacheSizeInBytes for memory management and threads for controlling worker concurrency.

import {OffthreadVideo} from '@remotion/media';

export const HeavyVideo = () => (
  <OffthreadVideo
    src="https://example.com/4k-video.mp4"
    cacheSizeInBytes={500 * 1024 * 1024}
    threads={4}
  />
);

Internal Rendering Components

<VideoForRendering>: Frame Extraction During Export

The <VideoForRendering> component handles frame extraction during the video export process. Located in packages/media/src/video/video-for-rendering.tsx, this internal component is invoked by the renderer rather than being imported directly by users.

Unlike the standard <Video> component, <VideoForRendering> does not insert a DOM element. Instead, it extracts the exact frame at the requested time using WebCodecs or fallback paths, returning an image-like frame that gets encoded into the final output.

// Internal usage only - not for direct import
import {VideoForRendering} from '@remotion/media';

<VideoForRendering
  src="video.mp4"
  currentTime={currentTime}
/>

<VideoForPreview>: Optimized Studio Preview

The <VideoForPreview> component optimizes video playback specifically for the Remotion Studio preview window. Found in packages/media/src/video/video-for-preview.tsx, this component balances rendering quality with preview responsiveness.

Similar to <VideoForRendering>, this component performs frame extraction but is optimized for fast preview updates with tighter latency constraints. It supports the same fallback logic as the standard <Video> component to ensure consistent behavior across different video formats.

import {VideoForPreview} from '@remotion/media';

<VideoForPreview
  src="video.mp4"
  currentTime={previewTime}
/>

Component Interactions and Fallback Logic

The video playback components in Remotion operate through a sophisticated fallback chain that ensures maximum compatibility across different rendering contexts.

When you author a composition using <Video>, the component first attempts to render a standard HTML5 video element. If the browser cannot decode the source format, it automatically falls back to <OffthreadVideo> using the logic defined at line 71 of packages/media/src/video/video.tsx.

During server-side rendering via remotion render, the system substitutes <Video> with <VideoForRendering> to extract individual frames using the WebCodecs API. Similarly, the Studio preview window utilizes <VideoForPreview> for optimized playback performance.

Configuration options for off-thread rendering are defined in packages/renderer/src/options/offthreadvideo-threads.tsx and packages/renderer/src/options/offthreadvideo-cache-size.tsx, allowing fine-tuning of worker threads and memory allocation.

Configuration and Source File Reference

Component	Source File	Purpose
<Video> / <Html5Video>	packages/media/src/video/video.tsx	Public API for video playback
<OffthreadVideo> (core)	packages/core/src/video/OffthreadVideo.tsx	WebCodecs implementation
<VideoForRendering>	packages/media/src/video/video-for-rendering.tsx	Frame extraction for export
<VideoForPreview>	packages/media/src/video/video-for-preview.tsx	Studio preview optimization
Studio Preview UI	packages/studio/src/components/Preview.tsx	Preview window interface
Thread configuration	packages/renderer/src/options/offthreadvideo-threads.tsx	Worker thread settings
Cache configuration	packages/renderer/src/options/offthreadvideo-cache-size.tsx	Memory limit settings

Summary

• <Video> serves as the primary public API for embedding videos in Remotion compositions, rendering standard HTML5 video elements with automatic fallback capabilities.
• <OffthreadVideo> provides high-performance decoding using the WebCodecs API, processing frames off the main thread for large or high-resolution sources.
• <Html5Video> exists as a deprecated alias for backward compatibility and should be avoided in new code.
• <VideoForRendering> and <VideoForPreview> handle internal frame extraction during export and studio preview respectively, optimizing for their specific contexts.
• The components implement intelligent fallback chains, automatically switching between HTML5 playback and off-thread decoding based on browser capabilities and configuration.

Frequently Asked Questions

What is the difference between <Video> and <OffthreadVideo> in Remotion?

<Video> renders a standard HTML5 <video> element suitable for most client-side playback scenarios, while <OffthreadVideo> uses the WebCodecs API to decode frames off the main thread. According to the source code in packages/core/src/video/OffthreadVideo.tsx, the off-thread component is specifically designed for high-resolution videos and server-side rendering where main-thread performance is critical.

When should I use <Html5Video> instead of <Video>?

You should not use <Html5Video> in new code. As implemented in packages/media/src/video/video.tsx at line 195, <Html5Video> is a deprecated alias that simply forwards props to <Video> while emitting a console warning. It exists solely for backward compatibility with legacy Remotion projects.

How does Remotion handle video playback during server-side rendering?

During server-side rendering via remotion render, the framework automatically substitutes <Video> components with <VideoForRendering>, located in packages/media/src/video/video-for-rendering.tsx. This internal component extracts exact frames at requested timestamps using the WebCodecs API or fallback paths, returning image data that gets encoded into the final video output without inserting DOM elements.

What configuration options are available for optimizing off-thread video performance?

Remotion exposes two primary configuration options for <OffthreadVideo> performance tuning. The threads option, defined in packages/renderer/src/options/offthreadvideo-threads.tsx, controls the number of WebCodecs workers, while cacheSizeInBytes from packages/renderer/src/options/offthreadvideo-cache-size.tsx sets the memory limit for decoded frame caching. These settings allow optimization for specific hardware capabilities and video resolution requirements.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}