Remotion LabRemotion Lab
›影片›影片元件比較：OffthreadVideo、Html5Video 與 Video

影片元件比較：OffthreadVideo、Html5Video 與 Video

深入比較 Remotion 三種影片元件的差異，包含編解碼器支援、效能、畫面精確度及適用情境，協助您選擇最合適的元件。

影片元件比較

Remotion 提供了三種嵌入影片的元件，各有其底層實作與適用場景：

  1. <OffthreadVideo /> — 官方推薦，基於 Rust 的影格擷取器
  2. <Html5Video />（原名 <Video />，來自 remotion 套件）— 基於 HTML5 <video> 元素
  3. <Video />（來自 @remotion/media）— 實驗性 WebCodecs 元件，預計成為未來預設

功能比較表

功能<OffthreadVideo /><Html5Video /><Video /> (@remotion/media)
底層技術Rust + FFmpeg binaryHTML5 <video>Mediabunny、WebCodecs
畫面精確是不保證是
部分下載資源否（需 muted 屬性）是—
預覽方式HTML5 <video>HTML5 <video>WebCodecs
渲染速度快中等最快
HLS 支援Chrome v142+僅預覽時規劃中
需要 CORS否否是
可循環播放否是是
playbackRate（速度調整）是是是
toneFrequency（音調調整）僅渲染時僅渲染時僅渲染時
Three.js 材質useOffthreadVideoTexture()useVideoTexture()最佳，使用程式碼片段
客戶端渲染否否是

支援的容器格式

元件支援容器
<OffthreadVideo />.aac、.avi、.caf、.flac、.flv、.m4a、.mkv、.mp3、.mp4、.ogg、.wav、.webm
<Html5Video />.aac、.flac、.m4a、.mkv、.mp3、.mp4、.ogg、.wav、.webm
<Video /> (@remotion/media).aac、.flac、.mkv、.mov、.mp3、.mp4、.ogg、.wav、.webm（不支援的容器自動降階至 <OffthreadVideo />）

支援的編解碼器

元件支援編解碼器
<OffthreadVideo />AAC、AC3、AV1、FLAC、H.264、H.265、M4A、MP3、Opus、PCM、ProRes、VP8、VP9、Vorbis
<Html5Video />AAC、FLAC、H.264、MP3、Opus、VP8、VP9、Vorbis
<Video /> (@remotion/media)AAC、FLAC、H.264、MP3、Opus、VP8、VP9、Vorbis（不支援的編解碼器自動降階至 <OffthreadVideo />）

如何選擇？

  • 一般情況下：使用 <OffthreadVideo />，畫面精確、格式支援最廣
  • 需要循環播放：使用 <Html5Video /> 或 <Video />（@remotion/media）
  • 客戶端渲染：必須使用 <Video />（@remotion/media）
  • Three.js 材質：優先使用 @remotion/media 的 <Video />（搭配 onVideoFrame）

在預覽與渲染時使用不同元件

使用 useRemotionEnvironment() hook 可以讓您在預覽和渲染時分別使用不同的元件：

範例：預覽使用 OffthreadVideo，渲染使用 @remotion/media

import {
  useRemotionEnvironment,
  OffthreadVideo,
  RemotionOffthreadVideoProps,
} from 'remotion';
import { Video, VideoProps } from '@remotion/media';
 
// 一個在預覽時使用 OffthreadVideo、渲染時使用 @remotion/media Video 的元件
const AdaptiveVideo: React.FC<{
  offthreadVideoProps: RemotionOffthreadVideoProps;
  videoProps: VideoProps;
}> = ({ offthreadVideoProps, videoProps }) => {
  const env = useRemotionEnvironment();
 
  // 非渲染環境（即預覽模式）使用 OffthreadVideo
  if (!env.isRendering) {
    return <OffthreadVideo {...offthreadVideoProps} />;
  }
 
  // 渲染時使用 @remotion/media 的 Video（支援 WebCodecs，速度最快）
  return <Video {...videoProps} />;
};

範例：預覽使用 Html5Audio，渲染使用 @remotion/media

import {
  useRemotionEnvironment,
  Html5Audio,
  RemotionAudioProps,
} from 'remotion';
import { Audio, AudioProps } from '@remotion/media';
 
const AdaptiveAudio: React.FC<{
  html5AudioProps: RemotionAudioProps;
  audioProps: AudioProps;
}> = ({ html5AudioProps, audioProps }) => {
  const env = useRemotionEnvironment();
 
  // 預覽時使用 HTML5 Audio
  if (!env.isRendering) {
    return <Html5Audio {...html5AudioProps} />;
  }
 
  // 渲染時使用 @remotion/media 的 Audio
  return <Audio {...audioProps} />;
};

useRemotionEnvironment() 回傳值

const env = useRemotionEnvironment();
 
env.isRendering   // boolean：是否正在渲染（非預覽）
env.isPlayer      // boolean：是否在 <Player> 元件中
env.isStudio      // boolean：是否在 Remotion Studio 中

常見問題

Q：為什麼 <OffthreadVideo /> 不支援循環播放？

<OffthreadVideo /> 在渲染時是透過 FFmpeg 逐格擷取影格，並非即時串流，因此沒有原生的循環播放概念。若需要循環，請改用 <Html5Video /> 並搭配 loop 屬性，或在 <Sequence> 層次手動重複播放。

Q：<Video />（@remotion/media）需要 CORS，應如何設定？

若影片資源來自不同來源（跨域），需要伺服器在回應標頭中加入：

Access-Control-Allow-Origin: *

或更安全地指定您的網域：

Access-Control-Allow-Origin: https://your-domain.com

相關連結