官方文件(中譯)
Remotion 官方文件的繁體中文翻譯,幫助你快速理解核心概念。
入門
核心概念
視覺設計
視覺設計
運用 CSS 變換與 Remotion 工具打造視覺效果。
靜態資源
在 Remotion 專案中使用圖片、字型和其他靜態檔案。
圖層
用 AbsoluteFill 疊加多個圖層,建構複雜的視覺效果。
轉場效果
在不同場景之間加入流暢的轉場動畫。
字型
在 Remotion 影片中載入和使用自訂字型。
隨機效果
在 Remotion 中正確使用隨機數,確保每次渲染結果一致。
動畫數學
深入理解 interpolate 的映射原理與進階動畫技巧。
測量與佈局
在 Remotion 中測量元素尺寸和處理動態佈局。
Shaders
在 Remotion 中使用 WebGL Shaders 建立進階視覺效果。
<Img> 元件
使用 <Img> 元件在 Remotion 中顯示圖片,確保圖片在渲染時完整載入,避免渲染閃爍問題。
噪聲視覺化效果
使用 @remotion/noise 套件在 Remotion 影片中加入噪聲視覺化效果,包括浮動點陣網格等動態效果。
地圖動畫
使用 Mapbox GL JS 在 Remotion 中建立地圖動畫,包括地圖載入、樣式設定、路線繪製和動畫播放等功能。
光線洩漏效果
使用 @remotion/light-leaks 套件的 <LightLeak> 元件為影片加入 WebGL 光線洩漏效果,支援種子控制、色調偏移和轉場用途。
星爆視覺效果
使用 @remotion/starburst 套件的 <Starburst> 元件在 Remotion 中渲染基於 WebGL 的復古星爆放射線圖案,可自訂射線數、顏色和旋轉角度。
@remotion/preload — 資源預載入
使用 @remotion/preload 套件預載入影片、音訊、字體和圖片資源,確保 Player 和 Studio 中的流暢播放體驗。
渲染
渲染與輸出
學會用 Remotion Studio、CLI 和 Node.js 將影片渲染成 MP4。
編碼與格式
了解 Remotion 支援的影片編碼器和輸出格式。
靜態圖片
用 Remotion 渲染單幀為 PNG 或 JPEG 圖片。
透明影片
渲染含有 alpha 通道(透明背景)的影片。
批量渲染
從資料集批量產出多支影片。
渲染所有 Composition
了解如何一次渲染 Remotion 專案中的所有 Composition,包括使用 CLI 的 Bash 腳本方法和 Node.js API 方法。
輸出渲染產物(Artifacts)
使用 <Artifact> 元件在渲染影片時同時產生附帶檔案,例如字幕 .srt 檔案、章節文字、授權資訊等。
影片格式與編碼指南
全面了解 Remotion 支援的影片格式與編解碼器,包括 H.264、H.265、VP8、VP9、AV1、ProRes 的比較,以及 CRF 品質設定、音訊編解碼器和檔案副檔名的對應關係。
輸出縮放
使用 Remotion 以不同解析度渲染相同長寬比的影片,透過 scale 選項支援最高 16 倍縮放。
渲染為 GIF
學習如何在 Remotion 中將影片渲染為 GIF 格式,包括降低幀率、設定循環次數及透明 GIF 等功能。
建立覆疊層與浮水印
將 Remotion 影片匯出為透明 Apple ProRes 檔案,用於影片編輯軟體中的覆疊或轉場效果,支援 Final Cut Pro、Adobe Premiere 和 DaVinci Resolve。
影片品質指南
了解如何控制 Remotion 渲染影片的品質,包括 CRF 值、解析度縮放、JPEG 品質、位元率和 x264 預設等設定。
設定影片中繼資料
學習如何在 Remotion 渲染的影片中加入標題、藝術家、評論等中繼資料,支援 MP4、MOV 和 Matroska 格式。
硬體加速渲染
使用 GPU 硬體加速(VideoToolbox)加速 Remotion 的影片編碼過程,目前支援 macOS 上的 ProRes、H.264 和 H.265 格式。
HDR 高動態範圍影片
了解 Remotion 如何處理 HDR 影片的嵌入與轉換,以及為什麼不建議直接輸出 HDR 格式。
參數化影片
影片
影片與音訊
在 Remotion 專案中加入影片素材與背景音樂。
影片進階
影片素材的進階用法:裁切、透明、速度控制。
如何讓合成時長與影片一致
學習如何使用 calculateMetadata 和 parseMedia 讓 Remotion 合成的時長自動對齊影片或音訊的實際長度
staticFile() 函式
使用 staticFile() 將 public/ 資料夾中的檔案轉換為可在 Remotion 中載入的 URL,安全地引用靜態資源。
依序播放多段影片
學習如何在 Remotion 中使用 Series 和 OffthreadVideo 將多段影片依序串接播放,並透過 calculateMetadata 動態計算總時長
嵌入透明影片
學習如何在 Remotion 中嵌入含有 Alpha 通道的透明影片,以及如何用 mixBlendMode 處理純黑背景影片的透明效果
影片操作與 Canvas 繪圖
學習如何在 Remotion 中使用 onVideoFrame 回呼將影片幀繪製到 Canvas,並套用灰階濾鏡、綠幕去背等影像處理效果
隨時間動態加速影片
學習如何在 Remotion 中讓影片的播放速度隨時間動態變化,透過累加播放率的方式正確計算每一幀應播放的影片位置
影片跳切(Jump Cut)
學習如何在 Remotion 中實作跳切效果,跳過影片中的特定片段(例如口誤、停頓),並確保瀏覽器預覽與最終渲染都能精確呈現
<OffthreadVideo> 元件
使用 <OffthreadVideo> 元件在渲染時透過 FFmpeg 提取精確幀,解決預設 <Video> 元件的限制,獲得更好的影片渲染效能與精確度。
凍結影片的特定片段
使用 Freeze 元件在 Remotion 序列中暫停並恢復特定時間區間,實現影片凍結效果。
影片元件比較:OffthreadVideo、Html5Video 與 Video
深入比較 Remotion 三種影片元件的差異,包含編解碼器支援、效能、畫面精確度及適用情境,協助您選擇最合適的元件。
HLS 串流支援(HTTP Live Streaming)
在 Remotion 中使用 hls.js 播放 HLS(.m3u8)影片串流,並了解 Chrome v142+ 的原生 HLS 支援現況與注意事項。
將影片作為 Three.js 材質貼圖
在 Remotion 中使用 @remotion/media 的 Video 元件搭配 onVideoFrame,將影片作為 Three.js 材質貼圖,實現畫面精確的 3D 影片效果。
音訊
<Html5Audio>
使用 <Html5Audio> 元件在 Remotion 影片中加入音訊,支援音量控制、播放速率、循環播放等功能。
<OffthreadVideo> 與音訊處理
深入了解 <OffthreadVideo> 元件:在渲染時使用 FFmpeg 提取幀,並掌握音訊串流、色調對應、透明度等進階功能。
音訊進階
音訊的進階用法:音量控制、淡入淡出、視覺化。
匯入音訊
將音訊檔案放入 public/ 資料夾並使用 staticFile() 引用,或使用遠端 URL 串流音訊。
裁切音訊
使用 trimBefore 和 trimAfter prop 來裁切音訊片段的開頭與結尾。
延遲音訊
使用帶有正值 from 屬性的 <Sequence> 來延遲音訊的播放時機。
控制音量
使用 volume prop 控制靜態或隨時間變化的音量,並了解 Web Audio API 的進階音量選項。
靜音音訊
使用 muted prop 在特定幀範圍內靜音音訊,並可隨時間動態切換靜音狀態。
音訊播放速度
使用 playbackRate prop 控制音訊的播放速度,加速或減慢音訊播放。
控制音調
使用 toneFrequency 屬性在渲染期間調整音訊的音調高低
從影片中使用音訊
Video、Html5Video 和 OffthreadVideo 標籤中的音訊也會自動包含在輸出結果中
音訊視覺化
使用 Remotion 的 API 將音訊視覺化,建立音波圖、音樂視覺化效果等
音效
使用 @remotion/sfx 套件在 Remotion 影片中加入音效,包含現成的音效集合
匯出音訊
從 Remotion 匯出純音訊檔案,或是在匯出影片時排除音訊軌道
音訊處理的運算順序
了解 Remotion 中 Audio、Video、Html5Audio、Html5Video 和 OffthreadVideo 的音訊處理順序保證
字幕
Studio
Remotion Studio
深入了解 Remotion Studio 的功能與使用方式。
Studio 鍵盤快捷鍵
Remotion Studio 中所有可用的鍵盤快捷鍵完整參考,包含播放控制、視圖切換、縮放與 AI 功能。
將 Remotion Studio 部署至伺服器
學習如何將 Remotion Studio 部署至雲端 VPS,讓團隊成員可以透過瀏覽器存取渲染 UI。
Studio Quick Switcher
學習如何使用 Remotion Studio 的 Quick Switcher 快速切換 Composition、導覽選單項目及搜尋官方文件。
將 Remotion Studio 部署為靜態網站
將 Remotion Studio 匯出為靜態網站並部署到 Vercel、Netlify 或 GitHub Pages,同時作為渲染 API 的 Serve URL 使用。需 v4.0.97 以上版本。
Player
Remotion Player
在 React 應用程式中嵌入可播放的 Remotion 影片。
Player 尺寸縮放
了解 Remotion Player 的尺寸計算算法,以及如何控制播放器大小以適應不同的容器和螢幕尺寸。
@remotion/player 使用範例
完整的 @remotion/player 使用範例集合,涵蓋基本用法、控制列、循環播放、尺寸調整、自動播放、程式化控制、事件監聽及 inputProps 等場景。
Player 緩衝狀態管理
了解如何在 Remotion Player 中管理緩衝狀態,包括如何暫停播放等待內容載入,以及如何監聽緩衝事件以提供流暢的播放體驗。
Player 資源預載入
了解如何為 Remotion Player 預載入影片、音訊和圖片資源,使用 @remotion/preload API 和 prefetch() 函式確保媒體在需要時立即可用。
Player 最佳實踐
使用 Remotion Player 的最佳實踐指南,包括避免不必要的重新渲染、正確傳遞使用者互動事件、memoize inputProps 等效能優化技巧。
整合 Player 至 React 應用程式
學習如何將 Remotion Player 整合至 React 應用程式,並在 Remotion Studio 與伺服器端渲染之間共享程式碼。
解決自動播放問題
了解瀏覽器的自動播放限制,以及如何正確使用 Remotion Player 避免觸發瀏覽器政策。
取得與顯示 Player 目前時間
學習如何在 Remotion Player 外部取得並顯示目前播放時間,同時避免不必要的重新渲染。
避免 Player 閃爍問題
了解為什麼 Remotion Player 會出現閃爍現象,以及多種不同程度的解決策略。
預掛載元件以實現流暢播放
了解 Remotion 的預掛載(Premounting)機制,透過提前掛載元件讓媒體資源有時間載入,避免播放閃爍。
在 Remotion Player 中實作拖放功能
學習如何在 Remotion Player 中使用滑鼠事件建立可拖曳和縮放的互動式元素。
為 Player 建立自訂控制項
學習兩種為 Remotion Player 建立自訂控制項的方法:自訂行內控制項和 Player 外部的完整自訂控制項。
媒體鍵支援(Web MediaSession API)
了解 Remotion Player 如何透過 browserMediaControlsBehavior prop 處理鍵盤媒體鍵和瀏覽器媒體控制項。
排查 Player 播放問題
解決 Remotion Player 中的常見播放問題,包括黑色幀、音訊斷斷續續、意外暫停和畫面跳動等。
Player 與 Remotion 的程式碼共享
了解如何在 Remotion Player、Remotion Studio 與伺服器端渲染之間共享元件程式碼,以及 Webpack bundle 的注意事項。
伺服器端渲染
伺服器端渲染
用 Node.js API 在伺服器上渲染 Remotion 影片。
Docker 部署
在 Docker 容器中渲染 Remotion 影片。
使用 SSR API 進行渲染
使用 @remotion/renderer 套件的 Node.js API 在伺服器端渲染 Remotion 影片、音訊和圖片序列
使用 GPU 加速渲染
了解如何在 Remotion 渲染中啟用和使用 GPU 加速,包括支援的內容類型和各平台的設定方法
伺服器端渲染選項比較
比較 Remotion Lambda、Vercel Sandbox、Cloud Run 和 Node.js API 四種雲端影片渲染方案的速度、成本、易用性和擴展性
分散式渲染
了解跨多台機器進行分散式影片渲染的原理,以及為何 Remotion Lambda 是推薦的分散式渲染解決方案
在 Linux 上使用多核心渲染
了解 Linux 系統上 Chromium 多進程模式的設定方法,以充分利用多核心 CPU 提升 Remotion 渲染效能
在雲端使用 GPU(裸機)
使用 AWS EC2 GPU 執行個體在雲端渲染 Remotion 影片的完整工作流程指南。
在雲端使用 GPU(Docker)
在 AWS EC2 Docker 容器中搭配 GPU 渲染 Remotion 影片的設定指南。
Vercel 沙盒部署
在 Vercel Serverless Functions 和 Sandbox 環境上部署 Remotion 伺服器端渲染的完整指南,含限制說明與輕量渲染使用情境。
Cloudflare Containers
使用 Cloudflare Workers 和 Containers 部署 Remotion 伺服器端渲染的完整指南,含 wrangler.toml 設定與 R2 儲存整合。
Azure Container Apps
在 Azure Container Apps 上部署 Remotion 渲染服務的完整逐步指南,含 GPU 加速、自動縮放與 Azure CLI 部署範例。
客戶端渲染
客戶端渲染
在瀏覽器中直接渲染影片、圖片和音訊,無需伺服器基礎架構的實驗性功能。
客戶端渲染運作原理
深入了解 Remotion 客戶端渲染的機制,包括像素捕捉、畫布繪製、音訊處理和編碼流程。
客戶端渲染的限制
客戶端渲染支援的 CSS 樣式、HTML 元素和已知限制的完整參考文件。
遷移至客戶端渲染
將現有 Remotion 程式碼遷移至客戶端渲染的指南,包括 API 更換、CORS 設定和媒體元件替換。
取消客戶端渲染
使用 AbortController API 取消進行中的客戶端渲染,以及偵測渲染是否被取消的方法。
客戶端渲染中的遙測
了解 Remotion 客戶端渲染的遙測機制、收集的資料內容,以及如何設定授權金鑰。
建構應用
在現有專案中安裝 Remotion
了解如何將 Remotion 整合到現有的 React 應用程式中,包括 Next.js、React Router、Vite 和 Create React App,以及純 Node.js 伺服器端專案的安裝設定。
將 Remotion 專案轉換為應用程式
了解如何將使用 Remotion Studio 的專案轉換為具備播放器的完整 Web 應用程式
將 Player 轉換為 Remotion 專案
學習如何在已有 React Player 的應用程式中新增 Remotion Studio 支援,實現本地渲染和雲端部署
處理使用者影片上傳
學習如何在使用者上傳影片前即時預覽,並實作樂觀更新以提升使用體驗
驗證使用者上傳的影片
學習如何在上傳前驗證使用者影片的瀏覽器相容性,並處理不相容格式
使用預簽名 URL 上傳
學習如何使用預簽名 URL 讓使用者直接上傳檔案到雲端儲存,減輕伺服器負擔並提升安全性
建構 Google 字型選擇器
學習如何使用 @remotion/google-fonts 建構字型選擇器組件,在影片中動態載入和套用 Google Fonts
建構時間軸影片編輯器
學習如何建構一個基於時間軸的影片編輯器,支援多軌道、可拖曳元素和不同類型的媒體
支援多種幀率
學習如何在 Remotion 中支援多種幀率,包括撰寫與幀率無關的動畫以及動態切換 FPS
在 Electron 中使用 Remotion
學習如何將 Remotion 整合到 Electron 桌面應用程式中,包括打包配置、二進位檔案管理和平台特定注意事項
在 Angular 中使用 Remotion
學習如何將 Remotion Player 整合到 Angular 應用程式中,包括 React 包裝器組件和 TypeScript 設定
在 Svelte 中使用 Remotion
學習如何將 Remotion Player 整合到 Svelte 應用程式中,包括建立 React 包裝器和雙向數據綁定
在 Vue 中使用 Remotion
學習如何將 Remotion Player 整合到 Vue.js 應用程式中,包括 Vite 設定、React 包裝器和響應式數據更新
購買預建影片編輯器
了解可購買的預建 Remotion 影片編輯器範本和組件,快速啟動你的影片編輯應用程式
Mediabunny
Mediabunny 是 Remotion 生態系的媒體處理函式庫,提供純 WebAssembly 實作的影音解碼、幀提取與媒體資訊查詢功能。
Lambda
Remotion Lambda 設定指南
逐步說明如何安裝並設定 Remotion Lambda,包含 AWS 角色、使用者、存取金鑰、部署函式與渲染影片的完整流程。
Lambda AWS 身分驗證
說明如何使用環境變數、AWS 設定檔或輪換憑證,為 @remotion/lambda 套件設定 AWS 身分驗證。
Lambda 權限設定
說明 Remotion Lambda 所需的 IAM 使用者權限與角色權限,包含完整的 JSON 政策範例與驗證方式。
Lambda 區域選擇
說明如何為 Remotion Lambda 選擇最合適的 AWS 區域,包含支援的區域列表、延遲考量、定價差異與多區域部署策略。
Lambda 並行處理
說明 Remotion Lambda 的高並行分散式渲染架構,包含如何透過 framesPerLambda 與 concurrency 參數控制渲染並行度,以及預設值與限制說明。
Lambda 執行時間
說明 Remotion Lambda 的逾時設定與執行時間配置,包含函式逾時、delayRender 逾時、長時間渲染策略與分塊(chunking)技術。
Lambda 磁碟空間
說明如何設定 Remotion Lambda 的暫存儲存空間(ephemeral storage),包含磁碟大小設定、何時需要增加,以及儲存限制說明。
Lambda 常見問題
Remotion Lambda 常見問題解答,涵蓋設定疑問、除錯技巧、效能最佳化與授權相關問題。
Lambda 輕量客戶端
使用 @remotion/lambda/client 匯入精簡的 Lambda 方法,減少打包體積並避免依賴衝突
Lambda 自訂層
在 Remotion Lambda 中使用自訂 Lambda 層,替換 Chrome 版本、字型或表情符號
Lambda 環境分離
如何在 Remotion Lambda 中區分生產、預備與開發環境,管理函式、站台與 S3 儲存桶
Lambda 自訂輸出目的地
自訂 Remotion Lambda 渲染的輸出位置,支援自訂檔名、不同 S3 儲存桶,以及 Supabase、Cloudflare R2、DigitalOcean 等第三方雲端儲存
Lambda 部署清單
上線前的 Remotion Lambda 生產環境檢查清單,涵蓋記憶體優化、權限設定、並發控制、授權合規等關鍵項目
Lambda Webhooks
說明如何在 Remotion Lambda 中設定 Webhook 通知,包含 Webhook 配置、Payload 格式、簽名驗證與錯誤處理。
Lambda 費用
說明 Remotion Lambda 的費用組成、定價模型、費用估算方式,以及如何透過設定調整來降低渲染成本。
Lambda 自動刪除渲染
透過 AWS S3 生命週期規則自動刪除 Remotion Lambda 渲染結果,支援 1 天、3 天、7 天及 30 天後自動清理
從 PHP 使用 Lambda
如何使用 PHP 搭配 remotion/lambda Composer 套件,透過 Remotion Lambda 觸發影片與靜態圖片的渲染請求,包含 HTTP API 呼叫與驗證設定。
從 Go 使用 Lambda
如何使用 Go 語言搭配 Remotion Lambda Go SDK,透過 Remotion Lambda 觸發影片渲染請求並追蹤渲染進度,包含 HTTP 請求設定與完整範例程式碼。
從 Python 使用 Lambda
如何使用 Python 搭配 remotion-lambda pip 套件,透過 Remotion Lambda 觸發影片與靜態圖片的渲染請求,包含 boto3 整合、HTTP API 呼叫與大型輸入參數的自動處理。
Lambda Insights
如何為 Remotion Lambda 函式啟用 AWS Lambda Insights,以取得詳細的效能指標與監控資料,並透過 CloudWatch 進行分析。
Lambda 運作原理
深入了解 Remotion Lambda 觸發影片渲染時的內部執行流程,包含主函式、渲染器函式、Response Streaming 及 S3 串接機制。
Lambda 限制
了解 Remotion Lambda 適用的 AWS Lambda 標準配額與限制,包含並行執行數、儲存空間、RAM 及執行時間限制,以及如何申請配額提升。
升級 Lambda
說明如何將 Remotion Lambda 升級到最新版本,包含零停機升級的步驟與注意事項。
解除安裝 Lambda
說明如何從 AWS 基礎設施中完整移除所有 Remotion Lambda 相關資源,包括函式、站台、S3 儲存桶及 IAM 設定,以防止持續產生費用。
Lambda 成本優化
介紹幾種降低 Remotion Lambda 使用成本的策略,包括調整記憶體、並發數及選擇更便宜的 AWS 區域。
Lambda 速度優化
介紹幾種讓 Remotion Lambda 渲染盡可能快速完成的策略,包括提高並發、增加記憶體及使用更快的音訊編解碼器。
Lambda 疑難排解與除錯
如何對 Remotion Lambda 渲染失敗進行疑難排解與除錯,包含日誌查閱、逾時處理及錯誤報告方式。
不使用 IAM 使用者的 Lambda 設定
如何使用 IAM 角色而非長期 IAM 使用者憑證來執行 Remotion Lambda 渲染,提升安全性並符合企業規範。
Cloud Run
Cloud Run 設定
在 Google Cloud Run 上設定 Remotion 渲染環境的完整指南,涵蓋 GCP 專案建立、服務部署及基本設定。
Cloud Run 權限設定
Google Cloud Run 的 IAM 權限設定說明,包含服務帳戶建立、必要角色指派及安全性最佳實踐。
Cloud Run 區域選擇
選擇適合的 GCP 區域以部署 Remotion Cloud Run,涵蓋可用區域列表、延遲考量與費用差異。
Cloud Run 生成渲染
在 Google Cloud Run 上觸發 Remotion 渲染任務,包含 API 呼叫方式、渲染參數設定與輸出檔案處理。
Cloud Run Node.js API
Remotion Cloud Run 的完整 Node.js API 參考,包含 renderMediaOnCloudrun()、renderStillOnCloudrun()、deployService()、selectComposition() 等函式說明。
Cloud Run 費用
了解在 Google Cloud Run 上使用 Remotion 渲染影片的費用模型,包含計費方式、費用估算與優化建議。
Cloud Run 疑難排解
Remotion Cloud Run 常見問題排解指南,包含錯誤訊息說明、偵錯步驟與日誌查看方式。
Cloud Run 限制
Remotion Cloud Run 的技術限制,包含逾時時間、記憶體上限、並行數量與功能限制,以及對應的因應方式。
@remotion/cloudrun 概覽
Remotion Cloud Run 的整體介紹,包含架構說明、運作原理、費用及如何在 GCP Cloud Run 上渲染 Remotion 影片。
Cloud Run 生產環境清單
在將 Remotion Cloud Run 正式上線前,請確認此清單中的所有項目,確保服務穩定運行並符合成本效益。
Cloud Run 實例數
說明 Remotion Cloud Run 如何依需求擴縮容,以及如何設定最小和最大實例數以控制成本和效能。
升級 Cloud Run
說明如何將 Remotion Cloud Run 升級到最新版本,包含套件更新、服務重新部署及零停機升級的步驟。
解除安裝 Cloud Run
說明如何從 GCP 基礎設施中完整移除所有 Remotion Cloud Run 相關資源,包含服務、站點及 Cloud Storage Bucket。
工具
Tailwind CSS
在 Remotion 專案中使用 Tailwind CSS。
環境變數
在 Remotion 專案中使用環境變數。
測試
為 Remotion 影片撰寫自動化測試。
自訂 Webpack 設定
學習如何在 Remotion 中覆寫 Webpack 設定,啟用 MDX、TailwindCSS、SCSS、SVGR、GLSL、WebAssembly 等功能,以及在 CLI 和 Node.js API 中共用設定的最佳實踐。
第三方套件整合
了解如何在 Remotion 中整合各種第三方動畫與 UI 函式庫,包括 After Effects、Anime.js、CSS 動畫、GreenSock、Lottie、Three.js 等工具的使用方式。
從 Figma 匯入設計
學習如何將 Figma 設計匯出為 SVG,轉換為 React 元件後匯入 Remotion 專案,並為 SVG 元素加入動畫效果。
使用舊版 Babel 轉譯
在 Remotion 中回退到舊版 babel-loader 進行 JavaScript 和 TypeScript 轉譯的方法
使用純 JavaScript(非 TypeScript)
在 Remotion 中選擇退出 TypeScript 並使用純 JavaScript 開發的方法
TypeScript 路徑別名
在 Remotion 專案中設定 TypeScript 路徑別名,簡化模組導入路徑
從 Spline 匯入 3D 模型
使用 Spline 設計 3D 模型並匯出為 React Three Fiber 程式碼,在 Remotion 中製作 3D 動畫影片
從 After Effects 匯入動畫
使用 Bodymovin 插件將 After Effects 動畫匯出為 Lottie JSON,並在 Remotion 中透過 @remotion/lottie 套件播放
API 參考
Remotion 全套 API 參考索引,涵蓋核心套件、渲染器、Player、Lambda、Cloud Run 等所有主要模組的函式與元件清單。
AI
AI 整合
用 AI 工具加速 Remotion 影片開發。
使用 LLM 生成 Remotion 程式碼
本指南示範如何使用 Vercel AI SDK,從自然語言提示生成 Remotion 元件程式碼。
使用 Remotion AI 聊天機器人
Remotion 官方的 AI 聊天機器人,可以回答關於 Remotion 的問題,並幫助你更快解決問題。
Remotion 的 Model Context Protocol(MCP)
使用 Remotion 的 MCP 伺服器,讓你的編輯器 AI Chat 更深入地理解 Remotion 文件,提升程式碼生成品質。
使用 Claude Code 製作影片
透過 Claude Code AI 助手提示生成 Remotion 影片,快速入門指南
使用 Bolt.new 提示 Remotion 影片
在 Bolt.new 線上 AI 工具中提示並生成 Remotion 影片
Remotion 程式碼的即時編譯
將 AI 生成的 Remotion 元件字串在瀏覽器中動態編譯並即時渲染
LLM 的 Remotion 系統提示
提供給大型語言模型的系統提示,教導 LLM Remotion 的機制和規則以生成正確的程式碼
Remotion AI Skills
Remotion 維護的 Agent Skills 清單,定義在 Remotion 專案中工作的最佳實踐,適用於 Claude Code、Codex 和 Cursor 等 AI 代理
提示生成動態圖形 SaaS 起始套件
使用 Remotion 官方 Next.js 模板快速建立 AI 驅動的動態圖形 SaaS 產品,支援自然語言描述生成即時動畫
參考
疑難排解
常見問題疑難排解
Remotion 開發中常見問題的診斷與解決方法,涵蓋背景圖片閃爍、找不到編解碼器、媒體播放異常等議題。
排解渲染逾時錯誤
了解 Remotion 中 delayRender() 逾時錯誤的原因與解決方法,以及如何延長逾時限制、加入除錯標籤。
不可 Seek 的媒體檔案
了解 Remotion 中「媒體無法 seek」錯誤的成因與解決方案,包括 HTTP 標頭設定、Faststart 支援以及跨來源資源政策問題。
無法播放媒體(媒體播放錯誤)
了解如何排查 Remotion 中的媒體播放錯誤,包括編解碼器不支援、404 找不到資源、無效來源、錯誤標頭等常見原因及解決方案。
除錯失敗的渲染
如何診斷並修復 Remotion 渲染失敗的問題,包括啟用詳細日誌、添加程式碼日誌以及逐一排除元件
「Target closed」瀏覽器錯誤
解釋 Remotion 渲染中出現 'Target closed' 錯誤訊息的原因,以及如何修復 Chromium 分頁崩潰的問題
效能最佳化
Remotion 渲染效能的最佳化技巧,涵蓋並行數設定、GPU 效果、影片標籤選擇、JavaScript 效能及編碼設定等面向
修復渲染閃爍問題
解釋 Remotion 渲染中出現畫面閃爍或不連續的原因,以及如何透過正確的動畫架構和資產載入方式解決問題
版本不匹配錯誤
說明 Remotion 各套件版本必須保持一致的原因,以及如何排查和修復版本不匹配導致的錯誤
Webpack 動態引入問題
解釋在 Remotion 中使用 Webpack 動態引入資產時的限制,以及使用 staticFile() 和正確表達式的解決方法
staticFile() 相對路徑問題
說明 staticFile() 函式不支援相對路徑、絕對路徑或 public/ 前綴的原因,以及正確的使用方式
staticFile() 遠端 URL 問題
說明 staticFile() 函式不應用於遠端 URL,以及如何正確在 Remotion 元件中使用遠端圖片和媒體資源
背景圖片閃爍問題
使用 background-image 或 mask-image CSS 屬性時導致渲染閃爍的原因與解決方案
不要在 Remotion 中使用 CSS 動畫
說明為何 CSS animation、transition 和 JavaScript 計時器在 Remotion 中無法正常運作,以及如何改用 useCurrentFrame 驅動動畫
Next.js Image 元件閃爍問題
在 Remotion 中使用 Next.js 的 Image 元件會導致渲染閃爍,說明原因與替代方案
「Loading root component」逾時錯誤
解決 delayRender Loading root component 逾時錯誤,通常是因為入口點未正確呼叫 registerRoot()
Fast Refresh 無法運作
Remotion Studio 修改程式碼後畫面沒有即時更新的常見原因與解決方法
瀏覽器啟動失敗
解決渲染時出現「Failed to launch the browser process」錯誤的常見原因與修復方法
ENAMETOOLONG 錯誤
解決 Windows 上因 FFmpeg 指令長度超出限制而產生的 ENAMETOOLONG 錯誤
Composition 掛載位置錯誤
解決「Composition mounted inside another composition」錯誤,說明 Composition 元件的正確使用位置與場景
慢速幀擷取警告
解釋 Remotion 中使用慢速方法擷取視訊幀的警告原因,以及如何在舊版本中修復此問題
SIGKILL 程序被終止錯誤
說明 Remotion 渲染時出現 SIGKILL 訊號導致程序被強制終止的原因及解決方法,通常與記憶體不足有關
渲染卡住或停止回應
診斷並解決 Remotion 渲染過程中卡住、無限期掛起的問題,包含 delayRender 逾時、Chrome Headless Shell 設定及 Lambda 錯誤讀取等常見原因
delayRender Proxy 載入逾時
解決使用 OffthreadVideo 時出現的 delayRender proxy 逾時錯誤,包含逾時增加、視訊分割及使用新版 Video 標籤等解決方案
defaultProps 過大錯誤
說明 Remotion 渲染時出現 defaultProps too big 序列化錯誤的原因,以及如何透過精簡預設屬性來解決此問題
頁面函數執行逾時錯誤
說明 Remotion 渲染時出現 Timed out evaluating page function 錯誤的原因,通常是 CPU 或記憶體過載導致瀏覽器停止回應
字型載入錯誤
解決 Remotion 渲染時出現的字型載入逾時問題,尤其是使用 @remotion/google-fonts 時如何只載入需要的字型粗細和子集以避免逾時
次像素渲染問題
說明 Chrome 次像素渲染如何影響 Remotion 動畫的平滑度,以及如何使用 transform 和 perspective() 修復文字動畫的抖動問題
偵測到 Apple Silicon
在搭載 Apple Silicon(M 系列晶片)的 Mac 上使用 Remotion 時遇到的相容性問題與解決方案。
無法解析來源
排解 Remotion 中「Source could not be parsed」錯誤,了解造成此問題的常見原因與修復方法。
無法確定可執行檔
排解 Remotion 中「Could not determine executable to run」錯誤,了解 Chromium 二進位檔無法找到時的原因與修復方式。
找不到指定位置的幀
排解 Remotion 中「No frame found at position」錯誤,了解影片幀提取失敗的原因與修復方式。
在打包程式碼中呼叫 bundle()
排解 Remotion 中「Calling bundle() in bundled code」錯誤,了解為何不能在瀏覽器端或已打包的程式碼中呼叫 bundle() 函式。
取得協助
遇到 Remotion 相關問題時,了解如何透過 GitHub Issues、Discord 社群、官方文件與 Stack Overflow 取得協助。
常見問題
瀏覽器渲染
關於在瀏覽器中使用 Remotion 渲染影片的常見問題,包含 WebCodecs API、客戶端渲染與伺服器端渲染的比較。
自動計算影片長度
關於如何根據內容自動決定 Remotion Composition 時長的常見問題,包含 calculateMetadata 的使用方式。
在 Next.js 中渲染
關於在 Next.js 應用中使用 Remotion 的常見問題,包含整合方式、伺服器元件限制與常見錯誤排除。
在 Vercel 上渲染
關於在 Vercel 平台上部署 Remotion 渲染服務的常見問題,包含限制說明與替代方案建議。
在 Edge 上渲染
關於在 Edge 執行環境中使用 Remotion 渲染影片的常見問題,說明為何 Edge 環境不支援影片渲染以及可行的替代方案。
嵌入 Remotion Studio
關於將 Remotion Studio 嵌入其他應用程式的常見問題,包含技術可行性、使用限制與替代方案。
絕對路徑
關於在 Remotion 專案中使用絕對路徑引用資源的常見問題,說明為何應避免絕對路徑以及正確的資源引用方式。
即時串流
關於使用 Remotion 進行即時串流的常見問題,說明 Remotion 的設計定位、即時串流的技術挑戰與可行的解決方案。
parseMedia() 與 getVideoMetadata() 的差異
比較 Remotion 中 parseMedia() 和 getVideoMetadata() 兩個 API 的差異,說明各自的使用情境、功能範圍與遷移建議。
使用 Pexels 影片素材
關於在 Remotion 專案中使用 Pexels 免費影片素材的常見問題,包含授權說明、使用方式與技術注意事項。
Remotion 與 Motion Canvas 的差異
比較 Remotion 和 Motion Canvas 兩個動畫影片製作工具的差異,幫助你選擇最適合的工具。
Lovable 與動態圖形
關於使用 Lovable AI 工具開發動態圖形和 Remotion 應用程式的常見問題,包含整合方式、限制與最佳實踐。
程式碼片段
其他
安全性
在使用 Remotion 渲染影片時,應注意的安全性考量與最佳實踐。
無障礙
Remotion 影片中的無障礙功能考量,包含字幕、替代文字與色彩對比。
Chromium 旗標
Remotion 渲染時使用的 Chromium 旗標說明,以及如何自訂旗標以滿足特殊需求。
暫存目錄
Remotion 渲染過程中使用的暫存目錄說明、設定方式與清理策略。
Chrome Headless Shell
了解 Remotion 如何使用 Chrome Headless Shell 進行影片渲染,以及安裝與設定方式。
Linux 依賴套件
在 Linux 系統上執行 Remotion 所需安裝的系統套件清單與安裝指令。
--gl 旗標
Remotion 渲染時可選的 OpenGL 後端旗標說明,包含 angle、egl、swiftshader、swangle 與 vulkan 的適用情境。
Bun 支援
在 Bun 執行環境中使用 Remotion 的說明、限制與設定方式。
Deno 支援
在 Deno 執行環境中使用 Remotion 的說明、相容性限制與替代方案。
獨立函式
可以在不需要完整 Remotion 專案設定的情況下單獨使用的函式說明。
Emoji 表情符號
在 Remotion 影片中渲染 Emoji 表情符號的方式,以及跨平台一致性的解決方案。
跨來源隔離
Cross-Origin Isolation 標頭設定說明,以及與 SharedArrayBuffer 的關係。
CORS 問題
在 Remotion 開發與渲染中遇到的 CORS 問題說明與解決方案。
#t= 媒體片段
使用 Media Fragments URI 規格,在 Remotion 中以時間範圍精確選取媒體內容。
React Native
在 React Native 應用程式中使用 Remotion 概念與工具的說明。
偵測 Remotion 環境
如何在程式碼中判斷目前是否在 Remotion 渲染環境中執行,以分離渲染邏輯與非渲染邏輯。
資源列表
精選的 Remotion 學習資源、教學文章、社群連結與實用工具匯整。
資源
升級 Remotion
了解如何升級 Remotion 版本,查看各版本的重大變更與遷移指南。
貢獻指南
了解如何為 Remotion 開源專案做出貢獻,包括回報 Bug、提交 PR 和改善文件。
授權與定價
了解 Remotion 的授權模式,個人免費使用,企業依規模付費,以及各方案的詳細內容。
致謝
感謝所有讓 Remotion 得以運作的開源依賴、貢獻者與社群夥伴。
影片編輯器起始模板
使用 Remotion 的 Editor Starter Kit 快速建立功能完整的線上影片編輯器,內含時間軸、屬性面板和即時預覽。
時間軸模板
使用 Remotion 的時間軸模板建立影片編輯器中的核心時間軸元件,支援拖曳、縮放與多軌道操作。
動態字幕模板
使用 Remotion 的動態字幕模板,為影片自動生成帶有動畫效果的逐字字幕,支援 OpenAI Whisper 轉錄。
錄製器模板
使用 Remotion 的 Recorder 模板快速建立螢幕錄製加工具,結合程式碼高亮、自動字幕與品牌化輸出。