Skip to main content

预加载资源

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

支持两种预加载方式：

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

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

tsx
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();
tsx
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() 预取​

在 v3.2.23 中可用

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

tsx
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();
tsx
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 vs. prefetch()​

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

@remotion/preload 更适合处理大型资源，因为您无需等待其下载完成。

html
<table>
  <tr>
    <th></th>
    <th>
      <div>
        <code>preloadAudio()</code>
        <br />
        <code>preloadVideo()</code>
      </div>
    </th>
    <th>
      <div>
        <code>prefetch()</code>
      </div>
    </th>
  </tr>
  <tr>
    <td>Works with</td>
    <td>所有音频和视频API、图像和字体</td>
    <td>
      <a href="/docs/audio">
        <code>{'<Audio/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/video">
        <code>{'<Video/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/img">
        <code>{'<Img/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/offthreadvideo">
        <code>{'<OffthreadVideo/>'}</code>
      </a>
    </td>
  </tr>
  <tr>
    <td>Mechanism</td>
    <td>
      插入一个<code>{"<link type='preload'>"}</code>标签
    </td>
    <td>获取资源并将其转换为URL blob或Base 64 URL</td>
  </tr>
  <tr>
    <td>Readiness</td>
    <td style={{color: 'green'}}>
      当资源部分加载时准备就绪
    </td>
    <td style={{color: 'red'}}>必须完全获取资源</td>
  </tr>
  <tr>
    <td>Reliability</td>
    <td style={{color: 'red'}}>没有保证，只是向浏览器发送信号</td>
    <td style={{color: 'green'}}>
      保证准备就绪，可以跟踪加载进度
    </td>
  </tr>
  <tr>
    <td>Callback</td>
    <td
      style={{
        color: 'red',
      }}
    >
      无法确定是否准备就绪
    </td>
    <td
      style={{
        color: 'green',
      }}
    >
      当Promise解析时准备就绪
    </td>
  </tr>
  <tr>
    <td>Package</td>
    <td>@remotion/preload</td>
    <td>remotion</td>
  </tr>
  <tr>
    <td>Handles HTTP redirects</td>
    <td>
      必须使用{' '}
      <a href="/docs/preload/resolve-redirect">
        <code>resolveRedirect()</code>
      </a>
    </td>
    <td>自动处理</td>
  </tr>
  <tr>
    <td>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>
    </td>
    <td>
      如果使用{' '}
      <a href="/docs/preload/resolve-redirect">
        <code>resolveRedirect()</code>
      </a>{' '}
      ，资源必须支持CORS
    </td>
    <td>资源必须支持CORS</td>
  </tr>
  <tr>
    <td>Available from</td>
    <td>v3.0.14</td>
    <td>v3.2.23</td>
  </tr>
</table>
html
<table>
  <tr>
    <th></th>
    <th>
      <div>
        <code>preloadAudio()</code>
        <br />
        <code>preloadVideo()</code>
      </div>
    </th>
    <th>
      <div>
        <code>prefetch()</code>
      </div>
    </th>
  </tr>
  <tr>
    <td>Works with</td>
    <td>所有音频和视频API、图像和字体</td>
    <td>
      <a href="/docs/audio">
        <code>{'<Audio/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/video">
        <code>{'<Video/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/img">
        <code>{'<Img/>'}</code>
      </a>
      ,{' '}
      <a href="/docs/offthreadvideo">
        <code>{'<OffthreadVideo/>'}</code>
      </a>
    </td>
  </tr>
  <tr>
    <td>Mechanism</td>
    <td>
      插入一个<code>{"<link type='preload'>"}</code>标签
    </td>
    <td>获取资源并将其转换为URL blob或Base 64 URL</td>
  </tr>
  <tr>
    <td>Readiness</td>
    <td style={{color: 'green'}}>
      当资源部分加载时准备就绪
    </td>
    <td style={{color: 'red'}}>必须完全获取资源</td>
  </tr>
  <tr>
    <td>Reliability</td>
    <td style={{color: 'red'}}>没有保证，只是向浏览器发送信号</td>
    <td style={{color: 'green'}}>
      保证准备就绪，可以跟踪加载进度
    </td>
  </tr>
  <tr>
    <td>Callback</td>
    <td
      style={{
        color: 'red',
      }}
    >
      无法确定是否准备就绪
    </td>
    <td
      style={{
        color: 'green',
      }}
    >
      当Promise解析时准备就绪
    </td>
  </tr>
  <tr>
    <td>Package</td>
    <td>@remotion/preload</td>
    <td>remotion</td>
  </tr>
  <tr>
    <td>Handles HTTP redirects</td>
    <td>
      必须使用{' '}
      <a href="/docs/preload/resolve-redirect">
        <code>resolveRedirect()</code>
      </a>
    </td>
    <td>自动处理</td>
  </tr>
  <tr>
    <td>
      <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>
    </td>
    <td>
      如果使用{' '}
      <a href="/docs/preload/resolve-redirect">
        <code>resolveRedirect()</code>
      </a>{' '}
      ，资源必须支持CORS
    </td>
    <td>资源必须支持CORS</td>
  </tr>
  <tr>
    <td>Available from</td>
    <td>v3.0.14</td>
    <td>v3.2.23</td>
  </tr>
</table>

预加载 GIFs​

您可以使用preloadGif() 预加载和预解析 GIFs。

参见​