【问题标题】：HTML5 video MEDIA_ERR_DECODE occurs randomlyHTML5 视频 MEDIA_ERR_DECODE 随机出现
【发布时间】：2017-01-07 23:50:18
【问题描述】：

我正在开发一个包含 6 个音频和视频元素的项目，这些元素一个接一个地播放。发布前的代码顺序是这样的：

预加载所有媒体资源直到“canplaythrough”
播放视频 1
停止 video-1 并播放 audio-1
停止音频 1 并再次播放视频 1。

然后 video-1 正在播放 2-3 秒并停止发送错误代码 3（3 = MEDIA_ERR_DECODE - 解码时发生错误）。我尝试通过链接播放相同的视频，并且播放效果很好。

在某些浏览器的某些操作系统上也随机出现此问题。例如：

Win10 最新Opera - 出现
Win10 最新 Chrome - 很好
MacOS 所有浏览器 - 很好
另一个 MacOS 最新的 Chrome - 出现在 10 个案例中的 1 个
iPhone 所有浏览器 - 都很好
iPad 所有浏览器 - 都很好

更新只有在第一次查看或禁用缓存时，它才会在 Win10 最新的 Opera 上发生。

更新 2 视频编解码器为 H.264，音频编解码器为 AAC，帧率为 24。

【问题讨论】：

标签： javascript html video decode opera

【解决方案1】：

MEDIA_ERR_DECODE 的定义

HTML5 spec for for media error codes

在媒体资源被确定为可用后，解码媒体资源时发生了一些描述错误。

Mozilla MediaError documentation

尽管之前已确定可用，但在尝试解码媒体资源时发生错误，导致错误。

Firefox 错误消息（如support ticket）

由于损坏问题或视频使用了您的浏览器不支持的功能，视频播放被中止。

解雇的常见原因

视频已加密，但您未能解密。这可能是由多种原因造成的：

1) 使用多种 DRM 方案（而不仅仅是一个）加密视频可能会导致在某些浏览器上解密失败；

2)您忽略了在视频开始播放之前对其进行解密（可能在您完成许可请求之前将其意外设置为自动播放）；

3)没有足够的资源来解码视频，因为几个视频缓冲区（即使它们不是加密视频）已经用完。
您的浏览器不支持特定的媒体格式（例如 DASH）。这可以通过插件来解决，具体取决于媒体类型。
您在 <source> 元素上设置了错误的 MIME 类型；请注意，某些浏览器更喜欢声明不同的 MIME 类型以解码某些视频格式。
太多的视频缓冲区没有被清除就用完了。

根据您的情况进行诊断

由于错误触发相当不确定，这似乎是资源问题，而不是任何其他可能性。您有六个音频和视频元素一个接一个地播放，因此您应该在每次传输媒体时清除每个元素。您也不应该并排加载所有六个。

var video = document.getElementById('myVideo');
var nextVideo = document.getElementById('nextVideo');

video.addEventListener('ended', (event)=>{
    video.src = ""; // or the src attribute of the active <source> element.
    video.load();
    // If you aren't going to re-use this video element, you should also
    // remove all eventListeners from it and then remove it from the DOM.
    nextVideo.preload = "auto"; // I'm assuming the src has already been set.
    nextVideo.autoplay = true;
    // Second video should start playing now due to autoplay. If not, call load() again.
});

video.preload = "auto";
nextVideo.preload = "metadata";
video.src = "video.mp4";
nextVideo.src = "nextVideo.mp4";
video.autoplay = true;
nextVideo.load(); // I believe load() might not be necessary for preload = "metadata".
video.load(); // I believe load() is necessary for preload = "auto".
// First video should start playing now due to autoplay.

与iOS相关的this answer类似。

【讨论】：

【解决方案2】：

当视频文件太大时，您可能会遇到这个问题。推荐设置为：

video.preload = "auto"

改为：

video.preload = "metadata"

【讨论】：

【解决方案3】：

就我而言，这是因为我正在流式传输高比特率 HLS 内容，而不是限制缓冲量。

SourceBuffer 已满，appendBuffer 失败，但在 Chrome (Chrome 91) 中，错误消息是误导性的 MEDIA_ERR_DECODE。

这可能会很快发生，在某个时间戳开始视频，播放 30 秒，MEDIA_ERR_DECODE 错误将可靠地发生，而且它似乎在某个视频时间戳可靠地发生，这让我相信它是确实是由于视频编码中的一些问题。

但事实并非如此。我的 VOD 托管平台的一位专业人士建议我限制缓冲区长度，通过将（我正在使用 hls.js）maxMaxBufferLength 从默认的 600s 更改为 30s，问题就解决了！ MEDIA_ERR_DECODE 在我进行此更改后再也没有发生过。

【讨论】：