customizable video rendering

[shubhraneelatlas]

I was very amazed with the part where user can change the content of video in run time, just like its been shown here https://www.remotion.dev/docs/player#demo

and was trying to replicate this, but I also wanted to download the same video after making those changes, but I am not able to do so,
When i am running npx remotion render it is dowloading the video with no background.
Can anyone please help me.

export const MyComp= ({ text }) => {
  const frame = useCurrentFrame();
 
  const opacity = Math.min(1, frame / 60);
  // return <div>Hello {text}!</div>;
  return(
    <div className="absolute-fill" style={{backgroundImage: `url(https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)`, backgroundPosition: 'center',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat'}}>
      <h1 style={{ opacity: opacity, color: 'white', fontSize: '50px'}}>Hello {text}!</h1>
    </div>
  )
};

[JonnyBurger]

Hi @shubhraneelatlas,

thanks for the question! This issue occurs because the image does not load in time before the render begins.
We provide components such as <Img>, https://remotion.dev/docs/img that wait until the media is loaded before the video renders.

The following component is a refactor of yours that will render without problems:

import {AbsoluteFill, Img, useCurrentFrame} from 'remotion';

export const MissingImg = ({text}) => {
	const frame = useCurrentFrame();

	const opacity = Math.min(1, frame / 60);
	// Return <div>Hello {text}!</div>;
	return (
		<AbsoluteFill>
			<AbsoluteFill>
				<Img
					style={{
						objectFit: 'cover',
					}}
					src="https://images.pexels.com/photos/1563356/pexels-photo-1563356.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
				/>
			</AbsoluteFill>
			<AbsoluteFill>
				<h1 style={{opacity, color: 'white', fontSize: '50px'}}>
					Hello {text}!
				</h1>
			</AbsoluteFill>
		</AbsoluteFill>
	);
};

[akparhi]

Hi @JonnyBurger, do the <Video> and <Audio> element also ensure video is fully downloaded before rendering?
As far as I can infer from docs, prefetch doesn't work during rendering.

[JonnyBurger]

@akparhi Yes those tags will ensure the video is downloaded during rendering!
You don't need to use prefetch() during rendering, only if you want to use the Player.