Skip to main content

��用带有 src http://localhost:3000/proxy 的 <Img> 进行加载

错误消息 A delayRender() "使用带有 src=http://localhost:3000/proxy?src=[...]&time=[...]&transparent=[...]" 的 <Img> 被调用，但在 28000ms 后未清除。请查看 https://remotion.dev/docs/timeout 以获取帮助：

A delayRender() "使用带有 src=http://localhost:3000/proxy?src=http%3A%2F%2Flocalhost%3A3000%2Fpublic%2Fbackground.mp4&time=683.45&transparent=false" 的 <Img> 被调用，但在 28000ms 后未清除。请查看 https://remotion.dev/docs/timeout 以获取帮助
A delayRender() "使用带有 src=http://localhost:3000/proxy?src=http%3A%2F%2Flocalhost%3A3000%2Fpublic%2Fbackground.mp4&time=683.45&transparent=false" 的 <Img> 被调用，但在 28000ms 后未清除。请查看 https://remotion.dev/docs/timeout 以获取帮助

在加载 <OffthreadVideo> 时，如果无法在 超时 内提取帧，则会发生此错误。

为了能够提取帧，<OffthreadVideo> 需要：

  • 完全下载文件
  • 打开文件并定位到正确位置
  • 解码帧并将其转换为图像

特别是对于需要一些时间来下载的大文件，可能会发生此错误。

增加超时时间​

考虑使用 delayRenderTimeoutInMilliseconds 属性来增加超时时间。

使用详细日志进行调试​

您还可以启用详细日志 来查看 <OffthreadVideo> 正在执行的工作进度。通常情况下，您可以从时间表中了解为什么会发生超时。

对视频进行分块​

目前，为了提取帧，<OffthreadVideo> 需要下载整个视频（我们正在努力消除这种需求）。

如果您正在加载一个大视频，请考虑将其分成较小的部分，并一次只加载部分视频。

例如，创建一个 <Series>，其中包含不同 src 属性的 <OffthreadVideo> 组件。

tsx
import { Series, useVideoConfig, OffthreadVideo, staticFile } from "remotion";
 
const parts = ["part1.mp4", "part2.mp4", "part3.mp4"];
 
const SeriesTesting: React.FC = () => {
  const { fps } = useVideoConfig();
 
  return (
    <Series>
      {parts.map((part) => {
        return (
          <Series.Sequence durationInFrames={30 * 60}>
            <OffthreadVideo src={staticFile(part)} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};
tsx
import { Series, useVideoConfig, OffthreadVideo, staticFile } from "remotion";
 
const parts = ["part1.mp4", "part2.mp4", "part3.mp4"];
 
const SeriesTesting: React.FC = () => {
  const { fps } = useVideoConfig();
 
  return (
    <Series>
      {parts.map((part) => {
        return (
          <Series.Sequence durationInFrames={30 * 60}>
            <OffthreadVideo src={staticFile(part)} />
          </Series.Sequence>
        );
      })}
    </Series>
  );
};

使用更快的 CDN​

确保使用具有足够出口带宽容量的视频托管位置。
将视频放在地理位置接近您的渲染位置的服务器上。

如果您认为这个错误是由 Remotion 中的一个 bug 触发的，请提交一个问题。