rohitt24k - 3/27/2025, 1: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, 2: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, 3: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, 3: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, 9: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, 9:25:12 AM

ah I see you already posted it

jonnyburger - 3/28/2025, 9: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: Rendering Video with Remotion on Lambda

Problem

When using the <Video /> component from Remotion in a Lambda environment, users may encounter a delayRender error indicating that the loading process for the video did not complete within the expected time limit. The error message typically resembles:

An error occurred on chunk 0:
 Error  A delayRender() "Loading <Video> duration with src=<video_src>" was called but not cleared after 28000ms. See https://remotion.dev/docs/timeout for help.

This issue occurs even when other components such as images and audio files load properly. The underlying cause is likely related to network conditions, such as rate limiting on the video source or timeout settings within the Remotion framework.

Reasons for the Issue

Network Latency: The video source may be slow to respond, leading to the timeout error.
Rate Limiting: External video services (like Pexels) can throttle requests from the same IP, especially if the same video is being requested multiple times within a short period.
Timeout Settings: Default timeout settings for loading videos may be insufficient.

Steps to Fix the Issue

Switch to OffthreadVideo Component: If you encounter delays using the <Video /> component, switch to using the OffthreadVideo component instead. This can help alleviate the rendering delay.

import { OffthreadVideo } from 'remotion';

const P0Composition: React.FC = () => {
  return (
    <div>
      <OffthreadVideo src="https://videos.pexels.com/video-files/5182920/5182920-hd_720_1280_25fps.mp4" />
    </div>
  );
};

export default P0Composition;

Use LoopedOffthreadVideo for Looping: To create a looping video, use the LoopedOffthreadVideo component instead. However, ensure that the continueRender() function is utilized properly.

Example snippet from Remotion documentation:
```
const LoopedOffthreadVideo: React.FC<RemotionOffthreadVideoProps> = (props) => {
  const [handle] = useState(() => delayRender());
  // { Your code logic here }
  continueRender(handle);
};
```
Adjust Timeout Settings: If you still face timeouts, consider adjusting the timeout duration according to the performance of the video source. You can configure the timeout using options in the Remotion settings.
Host Video Files Yourself: If you are using external services like Pexels, consider downloading the video file and hosting it yourself to avoid rate limiting issues associated with high request rates from the same IP.
Check Remotion Version: Ensure that you're utilizing the latest version of Remotion, as updates often include important bug fixes and performance improvements.
Monitoring and Troubleshooting: If issues persist, collect information about the specific video files and their URL, alongside your Remotion version, and check the Remotion community for assistance.

By following these steps, you can effectively mitigate the video rendering errors experienced when using Remotion on Lambda.

JonnyBurger/messages.md