Skip to main content

不可搜索的媒体

如果你在控制台看到以下错误：

🌐 If you see the following error in the console:

The media [src] cannot be seeked.
This could be one of two reasons:
1) The media resource was replaced while the video is playing but it was not loaded yet.
2) The media does not support seeking.
Please see https://remotion.dev/docs/non-seekable-media for assistance.

意义​

🌐 Meaning

此错误可能由以下两种原因之一引起：

🌐 This error could occur due to one of two reasons:

视频或音频在未预加载的情况下进入了视频。

最常见的情况是，当视频播放时音频被替换，例如由于用户输入发生变化。你可以通过先预加载资源然后再将它们挂载到音频标签中来解决这个问题——为此，资源需要支持 CORS。

🌐 Most commonly this happens when an audio has been replaced while the video is playing, for example due to user input changing. You can fix this by first preloading the assets before you mount them in an audio tag - for this the assets need to support CORS.


import { prefetch, staticFile } from "remotion";

const MyComp = () => {
  return (
    <select
      onChange={(e) => {
        prefetch(e.target.value)
          .waitUntilDone()
          .then(() => {
            setAudioUrl(e.target.value);
          });
      }}
    >
      <option value={staticFile("sample.mp3")}>Audio 0</option>
      <option value={staticFile("sample2.mp3")}>Audio 1</option>
      <option value={staticFile("sample3.mp3")}>Audio 2</option>
    </select>
  );
};

提供的视频或音频无法跳转到任意时间。

导致这种情况的原因是，在请求媒体文件时，要么：

🌐 The cause for this is that when requesting the media file, either:

  • 服务器未发送 Content-Range HTTP 头，这使得浏览器，因此也使得 Remotion 无法寻找媒体。
  • 服务器没有发送 Content-Length HTTP 头，这也阻止了寻址。
  • 该文件不支持 Faststart

你可以通过在新标签页中打开视频或音频来验证这是问题，并观察你无法在媒体中进行跳转。

🌐 You can verify that this is the problem by opening the video or audio in a new tab and observe that you cannot seek the media.

你可以确定视频是否支持寻址，你可以使用 getVideoMetadata() 函数。

🌐 You can determine if a video supports seeking, you can use the getVideoMetadata() function.

媒体无法加载到视频标签中。

以下标题可以防止文件被包含：

🌐 The following headers can prevent a file from being included:

  • X-Frame-Options: DENY
  • X-Frame-Options: SAMEORIGIN
  • X-Frame-Options: ALLOW-FROM https://example.com/
  • Content-Security-Policy: frame-ancestors 'none'
  • Content-Security-Policy: frame-ancestors 'self'
  • Content-Security-Policy: frame-ancestors https://example.com/
  • Cross-Origin-Resource-Policy: same-origin

由于服务器的政策，这些视频文件无法加载。

🌐 Those videos files cannot be loaded due to policy from the server.

解决方案​

🌐 Solutions

考虑以下其中一个解决方案：

🌐 Consider one of these solutions:

  • 从支持 Range 头并返回 Content-Length 和 Content-Range 头的网页主机提供媒体服务。
  • 下载媒体并使用 import 或 require() 语句在本地导入。
  • 使用 <OffthreadVideo> 组件，它将正常渲染视频。在 Remotion Studio 或 <Player> 中播放时，你仍可能看到问题。

另请参阅​

🌐 See also

Last updated on