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/>
MechanismInserts a <link type='preload'> tagFetches the asset and turns it into a URL blob or Base 64 URL
ReadinessReady to play when asset is partially loadedAsset must be fully fetched
ReliabilityNo guarantee, just a signal to the browserGuaranteed to be ready, posssible to track progress of loading
CallbackNo way to determine if readyReady when promise resolves
Package@remotion/preloadremotion
Handles HTTP redirectsMust use resolveRedirect()Handled automatically
CORSResource must support CORS if resolveRedirect() is usedResource must support CORS
Available fromv3.0.14v3.2.23

Preloading GIFs​

You can preload and preparse GIFs using preloadGif()

See also​