预加载资源

默认情况下，视频、音频或图片等资源只有在进入视频时才会被加载。使用 Remotion Player 时，你可能希望提前预加载这些资源，以便它们一进入视频就能立即播放。

🌐 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:

向浏览器发出信号，指示应使用 @remotion/preload API 加载资源
预先获取资源，然后使用 prefetch() 在本地播放它们

使用 `@remotion/preload` 预加载视频

🌐 Preloading videos using @remotion/preload

通过预加载，在页面上放置一个 <link type='preload'> 标签，向浏览器发出可以开始加载媒体的信号。
对于视频，使用 preloadVideo() API，对于音频使用 preloadAudio()，对于图片使用 preloadImage()。在组件外或在 useEffect() 内执行预加载。

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

使用 `prefetch()` 进行预取

🌐 Prefetching using prefetch()

可在 v3.2.23 中使用

🌐 Available in v3.2.23

通过预取，完整的媒体会被下载并使用 URL.createObjectURL() 转换为 Blob URL。
如果你将原始 URL 传入 <Audio>、<Video>、<OffthreadVideo>、<Html5Audio>、<Html5Video> 或 <Img> 标签，并且该资源已被预取，这些组件将使用 Blob URL 代替。

🌐 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>, <Html5Audio>, <Html5Video>, or <Img> tag 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` 对比 `prefetch()`

🌐 @remotion/preload vs. prefetch()

prefetch() 是一种更可靠的方式来确保媒体在需要显示时已准备就绪，但资源需要完全下载才能使用。

如果资源很大，@remotion/preload 更可取，因为你不必等待它下载完成。

	`preloadAudio()` `preloadVideo()`	`prefetch()`
Works with	All audio and video APIs, images and fonts	`<Audio/>` , `<Video/>` , `<Html5Audio/>` , `<Html5Video/>` , `<Img/>` , `<OffthreadVideo/>`
Mechanism	Inserts a `<link type='preload'>` tag	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

预加载 GIF

🌐 Preloading GIFs

你可以使用 preloadGif() 预加载和预解析 GIF

🌐 You can preload and preparse GIFs using preloadGif()

另请参阅

🌐 See also

使用 @remotion/preload 预加载视频​

使用 prefetch() 进行预取​

@remotion/preload 对比 prefetch()​

预加载 GIF​

另请参阅​

使用 `@remotion/preload` 预加载视频

使用 `prefetch()` 进行预取

`@remotion/preload` 对比 `prefetch()`

预加载 GIF

另请参阅