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 with All audio and video APIs, images and fonts {", {", {""}, {""}
Mechanism Inserts a {""} 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
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

Preloading GIFs​

You can preload and preparse GIFs using preloadGif()

See also​