Skip to content

Instantly share code, notes, and snippets.

@JonnyBurger
Created March 28, 2025 10:19
Show Gist options
  • Save JonnyBurger/0948f64871445dc5b70ed97d175bd3e7 to your computer and use it in GitHub Desktop.
Save JonnyBurger/0948f64871445dc5b70ed97d175bd3e7 to your computer and use it in GitHub Desktop.
AI-generated docs draft: Rendering video issues with Remotion on Lambda.

rohitt24k - 3/27/2025, 12:27:33 PM

Hey guys, i am trying to render a video using remotion on lyambda but i am facing some issue related to

errro ----------- An error occurred on chunk 0: Error A delayRender() "Loading

even though other network components like images and audios are properly loading this is the testing composition i am using

import { Video } from 'remotion';

const P0Composition: React.FC = () => { return (

); };

export default P0Composition;

is there anything that i am missing? please help πŸ™

rohitt24k - 3/27/2025, 1:48:12 PM

i was able to solve this using the OffthreadVideo Component and now it works file but i want to loop the video so i used the LoopedOffthreadVideo Component now the rendering stops after 80% or 90% is done.

rohitt24k - 3/27/2025, 2:26:31 PM

still getting the same error

An error occurred on chunk 10: Error A delayRender() was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help.

at node_modules/remotion/dist/esm/index.mjs:1535 1533 β”‚ const handle = Math.random(); 1534 β”‚ handles.push(handle); 1535 β”‚ const called = Error().stack?.replace(/^Error/g, "") ?? ""; 1536 β”‚ if (getRemotionEnvironment().isRendering) { 1537 β”‚ const timeoutToUse = (options?.timeoutInMilliseconds ?? (typeof window === "undefined" ? defaultTimeout : window.remotion_puppeteerTimeout ?? defaultTimeout)) - 2000; 1538 β”‚ if (typeof window !== "undefined") {

at src/remotion/utils/LoopableOffthreadVideo.tsx:15 13 β”‚ const LoopedOffthreadVideo: React.FC = (props) => { 14 β”‚ const [duration, setDuration] = useState<number | null>(null); 15 β”‚ const [handle] = useState(() => delayRender()); 16 β”‚ const { fps } = useVideoConfig(); 17 β”‚

rohitt24k - 3/27/2025, 2:27:24 PM

if the video is long enough and doesn't need to loop then its fine but if the video is short and needs to loop i am facing the delayRender issue

jonnyburger - 3/28/2025, 8:24:43 AM

first step: make sure you have added this continueRender(), https://github.com/remotion-dev/remotion/blob/9c34f7475255344450c7a2c32da77cfd6204238c/packages/example/src/LoopedOffthreadVideo.tsx#L40 we have updated the snippet recently

if that still doesn't work, can you send the video that you want to loop? https://remotion.dev/report please also mention the remotion version

jonnyburger - 3/28/2025, 8:25:12 AM

ah I see you already posted it

jonnyburger - 3/28/2025, 8:27:05 AM

I think you run into pexels rate limiting πŸ™ƒ if you request the video a lot from the same IP, they are heavily throttling, we see it a lot on pexels videos

consider re-hosting that pexels video yourself

Technical Note: Resolving Video Loading Issues in Remotion

Problem

When rendering videos using the <Video /> or LoopedOffthreadVideo components from Remotion, users may encounter the following error:

A delayRender() "Loading <Video> duration with src=..." was called but not cleared after 28000ms.

This issue often arises due to network latency, particularly when requesting videos from specific online sources like Pexels. Rate limiting from these sources can also contribute to these errors.

Cause

The error is primarily caused by the inability of the application to load the video within the given timeout period. This is often exacerbated by:

  • Network throttling or rate limits imposed by the video hosting service (e.g., Pexels).
  • Long video files that do not allow the system to call continueRender() in time.

Solution

To address the issue, users should implement the following steps:

  1. Use continueRender(): Ensure that the code includes a call to continueRender() in the component handling the video, particularly for looping functionality. This has been updated in recent versions.

    Example:

    const LoopedOffthreadVideo: React.FC<RemotionOffthreadVideoProps> = (props) => {
        const [duration, setDuration] = useState<number | null>(null);
        const [handle] = useState(() => delayRender());
    
        // Call continueRender() when done loading
        continueRender(handle);
    };
  2. Avoid Rate Limiting: If the video is hosted on Pexels, consider re-hosting the video on a personal or alternate server to bypass potential rate limiting issues, which often occur due to frequent requests from the same IP address.

  3. Test With Different Videos: If possible, test the rendering process with other video sources or formats to determine if the issue persists without involving rate limits.

  4. Provide Required Details: If problems continue, share the specific video link you are trying to loop along with the version of Remotion you are using for better assistance.

By following these steps, users should be able to mitigate the video loading issues they encounter during rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment