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

> Explore Remotion's video playback components: Video, OffthreadVideo, and internal renderers. Learn how each component optimizes video for playback, export, and previews in your React applications.

- Repository: [Remotion/remotion](https://github.com/remotion-dev/remotion)
- Tags: deep-dive
- Published: 2026-02-16

---

**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`](https://github.com/remotion-dev/remotion/blob/main/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.

```tsx
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`](https://github.com/remotion-dev/remotion/blob/main/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.

```tsx
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`](https://github.com/remotion-dev/remotion/blob/main/packages/media/src/video/video.tsx), while the core implementation resides in [`packages/core/src/video/OffthreadVideo.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/video/OffthreadVideo.tsx). The component exposes advanced configuration options including `cacheSizeInBytes` for memory management and `threads` for controlling worker concurrency.

```tsx
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`](https://github.com/remotion-dev/remotion/blob/main/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.

```tsx
// 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`](https://github.com/remotion-dev/remotion/blob/main/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.

```tsx
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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/packages/renderer/src/options/offthreadvideo-threads.tsx) and [`packages/renderer/src/options/offthreadvideo-cache-size.tsx`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/packages/media/src/video/video.tsx) | Public API for video playback |
| `<OffthreadVideo>` (core) | [`packages/core/src/video/OffthreadVideo.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/core/src/video/OffthreadVideo.tsx) | WebCodecs implementation |
| `<VideoForRendering>` | [`packages/media/src/video/video-for-rendering.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/media/src/video/video-for-rendering.tsx) | Frame extraction for export |
| `<VideoForPreview>` | [`packages/media/src/video/video-for-preview.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/media/src/video/video-for-preview.tsx) | Studio preview optimization |
| Studio Preview UI | [`packages/studio/src/components/Preview.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/studio/src/components/Preview.tsx) | Preview window interface |
| Thread configuration | [`packages/renderer/src/options/offthreadvideo-threads.tsx`](https://github.com/remotion-dev/remotion/blob/main/packages/renderer/src/options/offthreadvideo-threads.tsx) | Worker thread settings |
| Cache configuration | [`packages/renderer/src/options/offthreadvideo-cache-size.tsx`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/packages/renderer/src/options/offthreadvideo-threads.tsx), controls the number of WebCodecs workers, while `cacheSizeInBytes` from [`packages/renderer/src/options/offthreadvideo-cache-size.tsx`](https://github.com/remotion-dev/remotion/blob/main/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.