Skip to main content

prefetch()

Available in v3.2.23

By calling prefetch(), an asset will be fetched 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 fully fetched, those components will use Blob URL instead.

note

Remote assets need to support CORS.

More info
  • Remotion's origin is usually http://localhost:3000, but it may be different if rendering on Lambda or the port is busy.
  • You can disable CORS during renders.
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();

This API is useful if you are using the <Player /> component and you want to display a media asset and want to be sure it is fully loaded before it appears.

An alternative to prefetch() are the @remotion/preload APIs. See @remotion/preload vs prefetch() to decide which one is better for your usecase.

API​

The function takes a src, which can be a remote URL, an imported asset or an asset loaded using staticFile() (see: Importing assets). Once called, prefetching starts and an object with two properties are returned:

  • free() will abort the prefetching and free up the memory. Components using the asset might re-request the asset
  • waitUntilDone() will return a promise if called that resolves once asset has finished downloading and is ready to be using in <Audio>, <Video>, <OffthreadVideo> or <Img>.

See also​