prefetch()
Available in v3.2.23
By calling prefetch()
, an asset will be fetched and kept in memory so it is ready when you want to play it in a <Player>
.
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.
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", {method : "blob-url",});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", {method : "blob-url",});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 only 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
Arguments
src
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:
options
method
v3.2.35
previously defaulted to blob-url
Either blob-url
or base64
.
- With
blob-url
, the asset is turned into a Blob URL usingURL.createObjectURL()
- With
base64
, the asset is turned into a Base 64 URL.
Read below for which option is suitable for you.
Return value
An object with:
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>
.
blob-url
or base64
?
Turning the asset into a blob URL is much faster and efficient in general.
In Safari, even though it is a local URL, Safari may not be instantly playing the audio and have slight delays buffering audio.
Use base64
in Safari if you notice that your audio file plays with hickups even though the <Player>
requests a blob:
URL.