Skip to main content

无法播放带有源的音视频

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

🌐 The following error may occur in your Remotion project during development or while rendering:

- Error: Could not play video with src [source] [object MediaError]

or

- Error: Could not play audio with src [source] [object MediaError]

当你尝试在 Remotion 项目中嵌入 <Html5Video/> 或 <Html5Audio/> 标签，但浏览器无法加载和播放媒体时，就会发生此错误。尽管浏览器不会报告具体错误，但此错误有两个常见原因。

🌐 This error happens when you are trying to embed a <Html5Video/> or <Html5Audio/> tag in your Remotion project but the browser is unable to load and play the media. Although the browser does not report the exact error, there are two common reasons for this error.

Chrome 不支持该编解码器​

🌐 Codec not supported by Chrome

Chrome 并不支持所有的播放编码。例如：Linux 上的 HEVC，.avi，.flv。
将视频转换为 Chrome 支持的格式。

🌐 Chrome does not support all codecs for playback. For example: HEVC on Linux, .avi, .flv.
Convert the video to a format that is supported by Chrome.

无效来源​

🌐 Invalid source

确保你尝试加载的视频要么是本地可用的，要么是在互联网上公开可用的。打开开发者工具，进入网络（Network）选项卡，跟踪正在加载的资源，并在新标签页中打开它。它真的开始播放了吗？

🌐 Make sure you are trying to load a video that is either available locally or publicly on the internet. Open the DevTools, go to the Network tab, track the asset being loaded, and open it in a new tab. Does it actually start playing?

错误的头信息或状态码​

🌐 Wrong headers or status code

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

🌐 In order for the browser being able to play the media, it should be loaded with:

  • 200 状态码
  • 一个合适的 Content-Type 头
  • 一个 Content-Range 头以支持查找。

打开开发者工具并进入网络标签以验证情况是否属实。

🌐 Open the DevTools and go to the network tab to validate that this is the case.

互联网下载管理器​

🌐 Internet Download Manager

互联网下载管理器 已知会操纵网络流量，导致浏览器加载媒体时出现问题。如果你安装了，请禁用它。

其他不受支持的编解码器​

🌐 Other unsupported codecs

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

🌐 You might be importing a video that is not compatible with Chrome at all, e.g. FLV.

视频标签过多​

🌐 Too many video tags

错误信息可能包含 error creating media player，如果创建了过多的视频标签就会出现。
首先检查你是否不小心创建了无限渲染循环。例如，频繁更改 key 会在每一帧重新创建视频标签：

🌐 The error message might contain error creating media player, appearing if too many video tags are created.
First check that you are not accidentially creating an infite render loop. For example, changing the key frequently will re-create the video tag on every frame:

import {Html5Video} from 'remotion';

export default function SBSVideo() {
  return (
    <>
      {['https://remotion.media/BigBuckBunny.mp4', 'https://remotion.media/BigBuckBunny.mp4'].map((video, i) => {
        return <Html5Video key={uuidv4()} src={video} />;
      })}
    </>
  );
}

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

🌐 If you ruled out this possibility, use <OffthreadVideo> instead as it does not rely on a <video> tag.

从此错误v3.3.89中恢复​

🌐 Recover from this errorv3.3.89

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

🌐 You can handle this error and replace it with a different video by passing the onError() prop to the <Html5Video> or <OffthreadVideo> component.

另请参阅​

🌐 See also

Last updated on