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-url 或 base64。

  • 使用 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 选项手动设置内容类型。

参见​