Skip to main content

Preloading assets

By default, assets such as videos, audio, or images will only be loaded as they enter the video. When using the Remotion Player, you may want to preload those assets beforehand to make them play immediately once they enter the video.

Two ways of preloading are supported:

  • Signaling to the browser that assets should be loaded using the @remotion/preload APIs
  • Fetching the assets beforehand and then playing them locally using prefetch()

Preloading videos using @remotion/preload​

By preloading, a <link type='preload'> tag is placed on the page, signaling to the browser that it may start loading the media.
For videos, use preloadVideo() API, for audio use preloadAudio(), for images use preloadImage(). Perform the preload outside a component or inside an useEffect().

tsx
import {preloadAudio, preloadVideo} from '@remotion/preload';
 
const unpreloadVideo = preloadVideo('https://example.com/video.mp4');
const unpreloadAudio = preloadAudio(
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
);
 
// Later, you can optionally clean up the preload
unpreloadVideo();
unpreloadAudio();
tsx
import {preloadAudio, preloadVideo} from '@remotion/preload';
 
const unpreloadVideo = preloadVideo('https://example.com/video.mp4');
const unpreloadAudio = preloadAudio(
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
);
 
// Later, you can optionally clean up the preload
unpreloadVideo();
unpreloadAudio();

Prefetching using prefetch()​

Available in v3.2.23

By prefetching, the full media is downloaded and turned into a Blob URL using URL.createObjectURL().
If you pass the original URL into either an <Audio>, <Video>, <OffthreadVideo> or <Img> tag and the asset is prefetched, those components will use Blob URL instead.

tsx
import {prefetch} from 'remotion';
 
const {free, waitUntilDone} = prefetch('https://example.com/video.mp4');
 
waitUntilDone().then(() => {
  console.log('Video has finished loading');
});
 
// Call free() if you want to un-prefetch and free up the memory:
free();
tsx
import {prefetch} from 'remotion';
 
const {free, waitUntilDone} = prefetch('https://example.com/video.mp4');
 
waitUntilDone().then(() => {
  console.log('Video has finished loading');
});
 
// Call free() if you want to un-prefetch and free up the memory:
free();

@remotion/preload vs. prefetch()​

prefetch() is a more reliable way of ensuring the media is ready when it needs to displayed, but the asset needs to be downloaded in full for it.

@remotion/preload is preferrable if the asset is large since you don't have to wait for it finish downloading,

preloadAudio()
preloadVideo()
prefetch()
Works withAll audio and video APIs, images and fonts<Audio/>

,

<Video/>

,

<Img/>

,

<OffthreadVideo/>
Mechanism

Inserts a <link type='preload'> tag

Fetches the asset and turns it into a URL blob or Base 64 URL
Readiness

Ready to play when asset is partially loaded

Asset must be fully fetched
ReliabilityNo guarantee, just a signal to the browser

Guaranteed to be ready, posssible to track progress of loading

Callback

No way to determine if ready

Ready when promise resolves

Package@remotion/preloadremotion
Handles HTTP redirects

Must use

resolveRedirect()		Handled automatically
CORS

Resource must support CORS if

resolveRedirect()

is used

Resource must support CORS
Available fromv3.0.14v3.2.23

Preloading GIFs​

You can preload and preparse GIFs using preloadGif()

See also​