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(). 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 with	All audio and video APIs	<Audio/>, <Video/>, <Img/>, <OffthreadVideo/>
Mechanism	Inserts a <link type='preload'> tag	Fetches the asset and turns it into a URL blob
Readiness	Ready to play when asset is partially loaded	Asset must be fully fetched
Reliability	No guarantee, just a signal to the browser	Guaranteed to be ready
Callback	No way to determine if ready	Ready when promise resolves
Package	@remotion/preload	remotion
Handles HTTP redirects	Must use resolveRedirect()	Handled automatically
CORS	Resource must support CORS if resolveRedirect() is used	Resource must support CORS
Available from	v3.0.14	v3.2.23

See also

• @remotion/preload
• prefetch()