HTML5 视频 MEDIA_ERR_DECODE 随机出现

Question

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

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

然后视频 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。

原文由 Dzmitry Vasilevsky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

MEDIA_ERR_DECODE 的定义

用于媒体错误代码的 HTML5 规范

在媒体资源被确定为可用后解码媒体资源时发生了某种描述的错误。

Mozilla MediaError 文档

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

Firefox 错误消息（如本 支持票 中所示）

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

解雇的常见原因

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

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 有关的 答案 类似。

原文由 Jamie Birch 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

原文由 Kevin 发布，翻译遵循 CC BY-SA 4.0 许可协议