客戶端渲染的限制

警告 — 實驗性功能：此功能隨時可能出現錯誤和重大變更。請在 GitHub 上追蹤進度，並在 Discord 的 #web-renderer 頻道中參與討論。

瀏覽器必須支援 WebCodecs API。請查看瀏覽器支援了解最低版本需求。

與伺服器端渲染（進行完整截圖）不同，客戶端渲染會模擬影片的佈局和樣式並繪製至畫布。支援所有 CSS 屬性和影響頁面視覺樣式的因素並不可行，因此只支援最重要的樣式基本單元。

支援的 CSS 樣式

定位和佈局屬性

margin、left、display、width、height、flex、flex-direction 等影響元素位置和尺寸的屬性均受支援，因為 Remotion 使用 .getBoundingClientRect() 來取得元素的位置和尺寸。

overflow 屬性受支援。object-fit 屬性受支援。object-position 屬性不受支援，內容始終在容器內置中。

變形（Transform）

transform CSS 屬性受支援。transform-origin 屬性受支援。opacity 屬性受支援。scale、rotate 和 translate 變形受支援。perspective 屬性不受支援。perspective-origin 屬性不受支援。transform-style 屬性不受支援（預設為 preserve-3d，CSS 預設值為「flat」）。backface-visibility 屬性受支援。

背景

background-color 屬性受支援。帶有線性漸層的 background-image 受支援。background-clip 屬性受支援。其他 background-image 值和其他 background-* 屬性不受支援。

邊框和圓角

border、border-style、border-color、border-width 屬性受支援。border-radius 屬性受支援，包括垂直和水平半徑的不同值。corner-shape 屬性不受支援。outline 屬性受支援。

文字屬性

以下文字相關屬性受支援：color、-webkit-text-fill-color、font-family、font-size、font-style、font-weight、line-height、letter-spacing、word-spacing、text-transform、text-rendering、font-variant-caps、font-kerning、font-stretch、direction HTML 屬性、text-shadow、-webkit-text-stroke、-webkit-text-stroke-color、-webkit-text-stroke-width、paint-order。

以下文字屬性不受支援：writing-mode、text-decoration。

陰影（Shadows）

基本的 box-shadow 受支援。inset 陰影不受支援。「Spread radius」不受支援。

遮罩（Masks）

帶有線性漸層的 mask-image 受支援。其他 mask-image 值不受支援。

濾鏡（Filters）

filter 屬性支援以下濾鏡函式：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()。支援多個濾鏡組合使用。引用內嵌 SVG 濾鏡的 url() 不受支援。

警告：Safari/WebKit 不支援濾鏡。請使用 Chrome 或 Firefox 以獲得濾鏡支援。

支援的元素

以下 Remotion 元件受支援：

來自 @remotion/media 的 <Video>
來自 @remotion/media 的 <Audio>
<Img>
來自 @remotion/gif 的 <Gif>
來自 @remotion/rive 的 <RiveCanvas>
來自 @remotion/lottie 的 <Lottie>
來自 @remotion/three 的 <ThreeCanvas>
來自 @remotion/skia 的 <SkiaCanvas>
在 Chrome 中渲染時支援 <AnimatedImage>

以下元件不受支援，並附有替代方案：

<OffthreadVideo> — 請改用 <Video>
<Html5Video> — 請改用 <Video>
<Html5Audio> — 請改用 <Audio>
來自 @remotion/animated-emoji 的 <AnimatedEmoji> — 請改用 <Lottie>

不支援的樣式

所有未明確列出的樣式均不受支援。以下是部分不受支援的樣式選例：

clip-path
backdrop-filter
mix-blend-mode
background-blend-mode
z-index（請參閱下方的 Z-Index 說明）
本文件中未列出的任何其他屬性

隨著時間推移，我們將支援更多元素和樣式，並優先考慮需求最多的項目。請參閱如何貢獻以添加更多受支援的樣式。

Z-Index 排序

CSS 屬性 z-index 不受支援。若要控制元素的顯示順序，請從後至前排列你的元素。

影片和媒體限制

@remotion/media 的限制同樣適用。

Firefox 不支援 AAC 編碼

Firefox 不支援透過 WebCodecs 編碼 AAC 音訊。在 Firefox 中渲染時，請使用 Opus 音訊（WebM 容器）而非 AAC（MP4 容器）。

單一並發

客戶端渲染不支援多執行緒。然而，由於跨程序通訊較少，它在基本效率上更高。此外，在有畫面的瀏覽器中，通常可使用 GPU，帶來效能優勢。

背景分頁節流

當執行渲染的瀏覽器分頁移至背景時，瀏覽器會為了節省資源而限制 requestAnimationFrame，可能導致渲染暫停或顯著減慢。

Remotion 透過使用 Web Worker 計時器作為後備方案自動解決此問題。當分頁進入背景且 RAF 被限制時，Worker 計時器會接手保持渲染持續進行。

Worker 計時器的精確度低於 requestAnimationFrame，因此在背景分頁中渲染的速度會比前景分頁慢。為獲得最佳效能，請在渲染過程中保持分頁可見。