Loading with src http://localhost:3000/proxy

The error message A delayRender() "Loading 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  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

occurs when loading an <OffthreadVideo> and the frame cannot be extracted within the timeout.

To be able to extract a frame, <OffthreadVideo> needs to:

• Download the file in full
• Open the file and seek to the correct position
• Decode the frame and convert it into an image

Especially for large files which take some time to download, this error may occur.

Use <Video> from @remotion/media

The new <Video> tag from @remotion/media doesn't have the constraint that the entire video needs to be downloaded in order to extract a frame. Consider using it instead of <OffthreadVideo>.

See: Comparison of video tags

Increase the timeout

Consider increasing the timeout using the delayRenderTimeoutInMilliseconds prop.

Debug using verbose logging

You can also enable verbose logging to see the progress of the work that <OffthreadVideo> is doing. In the usual case, you can understand from the timings why the timeout occurred.

Chunk the video

Currently, <OffthreadVideo> needs to download the entire video in order to extract a frame (we work on eliminating this need in the future).

If you are loading a large video, consider chunking it into smaller parts and only load part of the video at a time.

For example, create a <Series> of <OffthreadVideo> components, each with a different src prop.

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>
  );
};

Use a faster CDN

Ensure using a place to host your video that has enough egress bandwidth capacity.
Place the video onto a server that is close to your render geographically.

If you believe this error was triggered by a bug in Remotion, please open an issue.