Skip to main content

预取(prefetch())

在 v3.2.23 中可用

通过调用 prefetch(),将会获取并保存一个资源在内存中,以便在您想要在 <Player> 中播放时准备就绪。

如果您将原始 URL 传递给 <Audio><Video><OffthreadVideo><Img> 标签,并且资源已完全获取,这些组件将使用 Blob URL。

note

远程资源需要支持 CORS

更多信息
  • Remotion 的原始地址通常是 http://localhost:3000,但如果在 Lambda 上渲染或端口繁忙,则可能会有所不同。

  • 您可以在渲染期间 禁用 CORS

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

如果您正在使用 <Player /> 组件,并且希望显示媒体资源并确保在显示之前完全加载,那么此 API 只有在这种情况下才有用。

prefetch() 的替代方案是 @remotion/preload API。请查看 @remotion/preload vs prefetch() 来决定哪种更适合您的用例。

API

参数

src

该函数接受一个 src,可以是远程 URL、导入的资源或使用 staticFile() 加载的资源(参见:导入资源)。一旦调用,预取将开始,并返回一个具有两个属性的对象:

options

method?v3.2.35

先前默认为 blob-url

可以是 blob-urlbase64

  • 使用 blob-url,资源将使用 URL.createObjectURL() 转换为 Blob URL
  • 使用 base64,资源将转换为 Base 64 URL。

请阅读下文以确定哪个选项适合您。

contentType?v4.0.40

为 blob 设置内容类型。默认情况下,会使用 HTTP 响应中的内容类型。我们建议为媒体设置适当的内容类型,例如 video/mp4,仅当 HTTP 资源默认情况下不包含正确的内容类型时。

onProgress?v4.0.85

用于处理进度事件的回调函数。

tsx
import { prefetch } from "remotion";
import type { PrefetchOnProgress } from "remotion";
 
const onProgress: PrefetchOnProgress = (progress) => {
if (progress.totalBytes === null) {
// HTTP response has no "Content-Length" header,
// therefore no relative progress can be calculated.
console.log("Loaded bytes:", progress.loadedBytes);
return;
}
 
console.log(
"Loading progress:",
Math.round(progress.loadedBytes / progress.totalBytes / 100) + "%",
);
};
 
prefetch("https://example.com/video.mp4", {
onProgress,
});
tsx
import { prefetch } from "remotion";
import type { PrefetchOnProgress } from "remotion";
 
const onProgress: PrefetchOnProgress = (progress) => {
if (progress.totalBytes === null) {
// HTTP response has no "Content-Length" header,
// therefore no relative progress can be calculated.
console.log("Loaded bytes:", progress.loadedBytes);
return;
}
 
console.log(
"Loading progress:",
Math.round(progress.loadedBytes / progress.totalBytes / 100) + "%",
);
};
 
prefetch("https://example.com/video.mp4", {
onProgress,
});

返回值

一个对象,包含:

free()

调用此函数将中止仍在进行中的预取并释放内存。使用该资源的组件可能会重新请求该资源。

waitUntilDone()

调用此函数将返回一个 Promise<string>,在资源下载完成并准备就绪时解析。

返回的 string 可能是:

  • 一个 blob: URL 或 data: Base 64 数据
  • 如果在渲染环境中,则是您传入的相同 src

您不需要在 <Audio><Video><OffthreadVideo><Img> 中使用此 URL,这些元素会自动使用它。

如果您需要在某处使用此 URL(例如用于 mask-image),可以从 waitUntilDone() 中获取它。

blob-url 还是 base64

通常将资源转换为 blob URL 更快速和高效。
在 Safari 中,即使是本地 URL,Safari 也可能不会立即播放音频,并且会有轻微的音频缓冲延迟。

如果注意到您的音频文件在 <Player> 请求 blob: URL 时仍有卡顿,请在 Safari 中使用 base64

设置正确的内容类型

从互联网加载的文件应该使用适当的内容类型提供,例如 MP4 文件应该使用 video/mp4。当文件加载到 blob URL 中时,文件扩展名会被移除,浏览器会丢失关于内容类型的信息。

这可能导致视频文件在浏览器中无法正确播放。如果无法影响服务器,您也可以使用 contentType 选项手动设置内容类型。

参见