delayRender Proxy 載入逾時

錯誤訊息

A delayRender() "Loading <Img> with src=http://localhost:3000/proxy?src=[...]&time=[...]&transparent=[...]" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help

完整範例：

A delayRender() "Loading <Img> with src=http://localhost:3000/proxy?src=http%3A%2F%2Flocalhost%3A3000%2Fpublic%2Fbackground.mp4&time=683.45&transparent=false" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help

錯誤原因

此錯誤發生在載入 <OffthreadVideo> 時，幀無法在逾時期限內擷取完成。

為了擷取幀，<OffthreadVideo> 需要依序完成以下工作：

1. 完整下載檔案 — 整個視訊檔案必須下載完成
2. 開啟檔案並定位到正確位置 — 定位到需要擷取的時間點
3. 解碼幀並轉換為圖像 — 將視訊幀解碼為圖像格式

對於需要一定時間下載的大型檔案，尤其容易觸發此錯誤。

解決方案

方案一：改用 @remotion/media 的 <Video> 標籤（推薦）

來自 @remotion/media 的新 <Video> 標籤不需要下載整個視訊才能擷取幀，可以考慮用它來替代 <OffthreadVideo>：

import { Video } from "@remotion/media";
 
export const MyComposition = () => {
  return (
    <Video
      src="https://example.com/large-video.mp4"
    />
  );
};

詳細比較請參閱：視訊標籤比較

方案二：增加逾時時間

使用 delayRenderTimeoutInMilliseconds 屬性增加逾時時間：

import { OffthreadVideo } from "remotion";
 
export const MyComposition = () => {
  return (
    <OffthreadVideo
      src="https://example.com/large-video.mp4"
      delayRenderTimeoutInMilliseconds={60000} // 60 秒
    />
  );
};

或在渲染設定中全域設定：

await renderMedia({
  composition,
  serveUrl,
  codec: "h264",
  outputLocation,
  timeoutInMilliseconds: 60000,
});

方案三：啟用詳細日誌進行除錯

啟用詳細日誌記錄可以查看 <OffthreadVideo> 工作的進度，從計時資訊中了解逾時發生的原因：

npx remotion render --log=verbose

方案四：分割視訊（Chunking）

目前 <OffthreadVideo> 需要下載整個視訊才能擷取幀（未來版本將改進此限制）。如果您正在載入大型視訊，可以考慮將其分割成較小的部分，每次只載入一部分：

import { Series, useVideoConfig, OffthreadVideo, staticFile } from "remotion";
 
const parts = ["part1.mp4", "part2.mp4", "part3.mp4"];
 
export const MyComposition = () => {
  const { fps } = useVideoConfig();
  const partDuration = 5 * fps; // 每部分 5 秒
 
  return (
    <Series>
      {parts.map((part, index) => (
        <Series.Sequence key={index} durationInFrames={partDuration}>
          <OffthreadVideo src={staticFile(part)} />
        </Series.Sequence>
      ))}
    </Series>
  );
};

預防措施

為了避免此問題，在設計包含視訊的合成時，請考慮：

相關資源

• OffthreadVideo 文件
• delayRender 逾時說明
• 視訊標籤比較
• @remotion/media