无法播放带有 src 的视频/音频

在开发或渲染过程中，您的 Remotion 项目可能会出现以下错误：

diff
- 错误：无法播放带有 src [source] 的视频 [object MediaError]

diff
- 错误：无法播放带有 src [source] 的视频 [object MediaError]

或者

diff
- 错误：无法播放带有 src [source] 的音频 [object MediaError]

diff
- 错误：无法播放带有 src [source] 的音频 [object MediaError]

当您尝试在 Remotion 项目中嵌入 <Video/> 或 <Audio/> 标签，但浏览器无法加载和播放媒体时会出现此错误。尽管浏览器没有报告确切的错误，但这种错误有两个常见原因。

Chromium 不支持的编解码器

与 Google Chrome 不同，Chromium 浏览器不包含专有编解码器。这意味着您无法播放 MP4/H.264 视频和一些音频编解码器（可能不支持更多编解码器）。

解决方法 1：使用 Chrome，而不是 Chromium。

解决方法 2：将视频转换为 WebM，使用 Chrome 而不是 Chromium，或使用 <OffthreadVideo>。

note

自 v4.0.18 版本起，如果您没有本地浏览器，则会自动下载包含编解码器的浏览器。

无效的来源

确保您正在尝试加载的视频是本地可用或公开在互联网上的。打开 DevTools，转到网络选项卡，跟踪正在加载的资源，并在新标签页中打开它。它是否真的开始播放？

错误的标头或状态码

为了让浏览器能够播放媒体，它应该加载：

• 一个 200 状态码
• 一个适当的 Content-Type 标头
• 一个 Content-Range 标头以支持寻址。

打开 DevTools 并转到网络选项卡，以验证是否符合这些条件。

互联网下载管理器

互联网下载管理器 会操纵网络流量，导致浏览器无法加载媒体。如果您安装了它，请禁用它。

其他不受支持的编解码器

您可能正在导入一种与 Chrome 完全不兼容的视频，例如 FLV。

视频标签过多

如果创建了太多视频标签，可能会出现 error creating media player 的错误消息。
首先检查您是否意外地创建了一个无限渲染循环。例如，频繁更改 key 将在每一帧上重新创建视频标签：

tsx
import { Video } from "remotion";
 
export default function SBSVideo() {
  return (
    <>
      {[
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      ].map((video, i) => {
        return <Video key={uuidv4()} src={video} />;
      })}
    </>
  );
}

tsx
import { Video } from "remotion";
 
export default function SBSVideo() {
  return (
    <>
      {[
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      ].map((video, i) => {
        return <Video key={uuidv4()} src={video} />;
      })}
    </>
  );
}

如果排除了这种可能性，请改用 <OffthreadVideo>，因为它不依赖于 <video> 标签。

从此错误中恢复v3.3.89

您可以通过将 onError() 属性传递给 <Video> 或 <OffthreadVideo> 组件来处理此错误，并将其替换为不同的视频。

另请参阅

• 编解码器支持