How to laod all video and image on Player from '@remotion/player

[yogeshdmca]

I am using Player from '@remotion/player

<Player ref={playerRef} controls lazyComponent={() => import('./HelloWorld')} durationInFrames={Math.floor(totalFrames)} compositionWidth={1280} compositionHeight={720} fps={30}
	inputProps={{ propOne: imageUrl, propTwo: 10, data: state, singleData: singleData }}
	style={{ width: '100%', }}
/>

and I have in loop and having 100 of video .

After run all video loaded nut issue is

1. When play player , video started fetching from internet and after few seconds its start playing , after done with a video need to wait for second video loaded ,

Video only load a single video link in editor , so preload even not work as its load second video when first is finish.

Can you help me with this ?

[JonnyBurger]

Hi Yogesh! It sounds like what would help if you preloaded each video (maybe not all of them if you have 100 but at least those which will be played soon) by rendering a video tag, like <video src="myvid.mp4" preload style={{position: 'absolute', top: -10000}}/>.

Note that I added some absolute styling to make sure the video is not visible online.
So they will not be shown but the browser has an opportunity to preload the videos.

[yogeshdmca]

Hello @JonnyBurger, still its only load video in current frame.

I think we need to overwrite code that load video tag in html and load 5 upcoming video tag , i was trying to find code that load video tag but unable to locate.
could you help with this please.

[JonnyBurger]

Here are some more ideas: https://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/

Especially #4 seems promising, you even get a source you can pass to the video element!

[yogeshdmca]

I already seen them and try but nothing work.

I need to load all Videos in Player, currently Remotion player only load 1 video that playing now , and when current paying video end then it add video tag for next video url.

@JonnyBurger do you have some input on this please ?

[JonnyBurger]

Did you really try approach #4? You'll get a source URL and then it's a local video it wouldn't make sense that it still needs to load.

It's unfortunate but by design: Remotion renders just React and when you switch out the video URL source it needs to reload.

If you tried it and you say it doesn't work, I need a repro to see further..

[yogeshdmca]

Sure @JonnyBurger I will give you code access from report forked.