Preloading assets
Assets should be preloaded before entering the scene so they are ready once they should be played.
The recommended way is to use a default premounting for all items in the <Player />.
This article documents 2 other, not recommended approaches which were developed when Remotion was not yet as mature.
Preloading videos using @remotion/preload
Don't use this for preloading audio and video: It only works for native HTML5 tags such as <video> and <audio>, but not for Remotion's own implementations such as <Video> and <Audio>.
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().
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
Don't use this: It first needs to download the whole media and keep it in memory.
By prefetching, the full media is downloaded and turned into a Blob URL using URL.createObjectURL().
If you pass the original URL into a <Video>, <Audio>, <Img>, or a media tag from remotion such as <Html5Audio>, <Html5Video>, or <OffthreadVideo>, and the asset is prefetched, those components will use Blob URL instead.
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()
preloadAudio()preloadVideo()preloadImage()preloadFont() | prefetch() | |
|---|---|---|
| Works with | HTML5 audio/video tags, images, and fonts | <Video/>, <Audio/>, <Img/>, and media tags from |
| Mechanism | Inserts a | 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, posssible to track progress of loading |
| 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()