API 參考
Remotion 全套 API 參考索引，涵蓋核心套件、渲染器、Player、Lambda、Cloud Run 等所有主要模組的函式與元件清單。
API 參考
本頁提供 Remotion 各套件的 API 參考索引。所有 API 均有官方英文文件，本頁以中文摘要說明各模組的用途，方便快速定位所需的 API。
remotion — 核心套件
核心套件包含所有在 Remotion 元件中使用的 React API。
元件
| 元件 | 說明 |
|---|---|
<Composition> | 宣告一個影片組合（在 Root 中使用） |
<Sequence> | 在時間軸上定位子元件的顯示區間 |
<AbsoluteFill> | 絕對定位填滿容器的輔助元件 |
<Series> | 將多個元件依序排列在時間軸上 |
<Loop> | 讓子元件在時間軸上循環重複 |
<Freeze> | 將子元件凍結在特定幀 |
<Audio> | 播放音訊資源 |
<Video> | 播放影片資源 |
<OffthreadVideo> | 逐幀提取影片（渲染時更可靠） |
<OffthreadAudio> | 逐幀提取音訊 |
<Img> | 等待圖片載入後再截圖的圖片元件 |
<IFrame> | 在 Remotion 中嵌入 iframe |
<Thumbnail> | 渲染靜態縮圖 |
Hooks
| Hook | 說明 |
|---|---|
useCurrentFrame() | 取得當前幀號 |
useVideoConfig() | 取得目前 Composition 的設定值 |
useBufferState() | 取得緩衝狀態（僅 Player 環境） |
函式
| 函式 | 說明 |
|---|---|
interpolate() | 在兩個值之間進行插值 |
spring() | 彈簧動畫計算 |
delayRender() | 延遲截圖直到非同步操作完成 |
continueRender() | 通知 Remotion 可以繼續截圖 |
cancelRender() | 中止目前渲染並顯示錯誤 |
staticFile() | 引用 public/ 目錄中的靜態資源 |
registerRoot() | 向 Remotion 登錄根元件 |
getInputProps() | 在元件外部讀取 inputProps |
random() | 產生可重現的隨機數 |
measureSpring() | 計算彈簧動畫的持續時間 |
@remotion/bundler — 打包器
用於將 Remotion 專案打包成可供渲染的 bundle。
| API | 說明 |
|---|---|
bundle() | 打包 Remotion 專案，回傳 serve URL |
@remotion/renderer — 渲染器
Node.js 環境下的渲染 API，用於伺服器端渲染。
| API | 說明 |
|---|---|
renderMedia() | 渲染影片或音訊檔案 |
renderStill() | 渲染單張靜態圖片 |
renderFrames() | 渲染所有幀為圖片序列 |
selectComposition() | 從 bundle 中選取一個 Composition |
getCompositions() | 取得 bundle 中所有 Composition 的清單 |
stitchFramesToVideo() | 將圖片序列合成影片 |
openBrowser() | 開啟瀏覽器實例（進階用法） |
ensureBrowser() | 確保瀏覽器已就緒 |
@remotion/player — Player 元件
用於將 Remotion 影片嵌入 React 應用程式。
| API | 說明 |
|---|---|
<Player> | 互動式影片播放器元件 |
<Thumbnail> | 靜態縮圖元件 |
PlayerRef | Player 的 ref 型別，用於呼叫播放器方法 |
PlayerRef 方法
| 方法 | 說明 |
|---|---|
.play(e?) | 開始播放 |
.pause() | 暫停播放 |
.toggle(e?) | 切換播放/暫停狀態 |
.seekTo(frame) | 跳至指定幀 |
.getCurrentFrame() | 取得當前幀號 |
.isPlaying() | 是否正在播放 |
.getContainerNode() | 取得 DOM 容器節點 |
.addEventListener() | 加入事件監聽器 |
.removeEventListener() | 移除事件監聽器 |
@remotion/lambda — AWS Lambda
在 AWS Lambda 上進行雲端渲染的 API。
| API | 說明 |
|---|---|
deploySite() | 部署 Remotion bundle 至 S3 |
deployFunction() | 部署 Lambda 函式 |
renderMediaOnLambda() | 在 Lambda 上渲染影片 |
renderStillOnLambda() | 在 Lambda 上渲染靜態圖片 |
getRenderProgress() | 查詢 Lambda 渲染進度 |
downloadMedia() | 從 S3 下載渲染結果 |
getFunctions() | 列出已部署的 Lambda 函式 |
getSites() | 列出已部署的 Remotion 網站 |
deleteSite() | 刪除已部署的網站 |
deleteFunction() | 刪除已部署的 Lambda 函式 |
@remotion/cloudrun — Google Cloud Run
在 Google Cloud Run 上進行雲端渲染的 API。
| API | 說明 |
|---|---|
renderMediaOnCloudrun() | 在 Cloud Run 上渲染影片 |
renderStillOnCloudrun() | 在 Cloud Run 上渲染靜態圖片 |
deployService() | 部署 Cloud Run 服務 |
getOrCreateBucket() | 取得或建立 GCS bucket |
@remotion/media-utils — 媒體工具
媒體資訊查詢與音訊處理工具。
| API | 說明 |
|---|---|
getVideoMetadata() | 取得影片的詮釋資料 |
getAudioData() | 解碼音訊並取得波形資料 |
visualizeAudio() | 將音訊資料轉換為視覺化用的數值陣列 |
getWaveformPortion() | 取得音訊波形的指定區段 |
@remotion/fonts — 字型
載入 Google Fonts 及自訂字型的 API。
| API | 說明 |
|---|---|
loadFont() | 動態載入字型（各字型有獨立的載入函式） |
@remotion/transitions — 轉場效果
在 Composition 之間加入過場動畫。
| API | 說明 |
|---|---|
<TransitionSeries> | 支援轉場的 Series 元件 |
<TransitionSeries.Sequence> | 轉場用的 Sequence 子元件 |
| 各種轉場效果 | fade()、slide()、wipe()、flip() 等 |
官方 API 文件
完整且最新的 API 說明請參考 Remotion 官方文件。