预取(prefetch())
在 v3.2.23 中可用
通过调用 prefetch()
,将会获取并保存一个资源在内存中,以便在您想要在 <Player>
中播放时准备就绪。
如果您将原始 URL 传递给 <Audio>
、<Video>
、<OffthreadVideo>
或 <Img>
标签,并且资源已完全获取,这些组件将使用 Blob URL。
远程资源需要支持 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";constonProgress :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";constonProgress :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
选项手动设置内容类型。