Chapter 343: Preloading assets

Core Idea

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.

Key Concepts

• Preloading videos using @remotion/preload
• Prefetching using prefetch()
• @remotion/preload vs. prefetch()
• Preloading GIFs
• See also

Code Examples

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();

• What it demonstrates: Usage pattern for Preloading assets from the official docs.

Key Takeaways

1. Understand preloading videos using @remotion/preload when working with Preloading assets.
2. Understand prefetching using prefetch() when working with Preloading assets.
3. Understand @remotion/preload vs. prefetch() when working with Preloading assets.
4. Understand preloading gifs when working with Preloading assets.
5. Understand see also when working with Preloading assets.

Connects To

• Clipper: related page in the Studio, Player & Editing section.
• Design Systems: related page in the Studio, Player & Editing section.
• Editor Starter: related page in the Studio, Player & Editing section.