不可搜索的媒体

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

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.

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.

含义

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

1

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

最常见的情况是，当视频正在播放时替换了音频，例如由于用户输入更改。您可以通过首先在将其挂载到音频标签之前预加载资产来解决此问题 - 为此，资产需要支持 CORS。

tsx
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>
  );
};

tsx
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>
  );
};

2

提供了无法搜索到任意时间的视频或音频。

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

• 服务器未发送Content-Range HTTP头，使得浏览器和因此 Remotion 无法搜索媒体。
• 服务器未发送Content-Length HTTP头，也会阻止搜索。
• 该文件不支持Faststart

您可以通过在新标签中打开视频或音频并观察无法搜索媒体来验证这一问题。

要确定视频是否支持搜索，您可以使用getVideoMetadata()函数。

3

阻止将媒体加载到视频标签中。

以下标头可能会阻止文件被包含：

• 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

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

解决方案

考虑以下解决方案之一：

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

参见

• getVideoMetadata()