HTML5 视频 MEDIA_ERR_DECODE 随机出现 [英] HTML5 video MEDIA_ERR_DECODE occurs randomly

问题描述

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

I'm developing the project witch contains 6 audio and video elements which plays one after another. The code order before issue is like that:

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

然后 video-1 播放 2-3 秒并停止发送错误代码 3(3 = MEDIA_ERR_DECODE - 解码时发生错误).我试图通过链接播放相同的视频，并且播放正常.

Then the video-1 is playing 2-3 seconds and stops sending the error code 3 (3 = MEDIA_ERR_DECODE - error occurred when decoding). I have tried to play the same video just by link and it is playing fine.

在某些浏览器的某些操作系统上也会随机出现该问题.例如:

Also the problem randomly occurs on some OS in some browsers. For example:

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

UPDATE 仅在第一次查看或禁用缓存时才会在 Win10 最新版 Opera 上发生.

UPDATE It is occuring on Win10 latest Opera only during first view or if cache is disabled.

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

UPDATE 2 Video Codec is H.264, Audio Codec is AAC, Framerate is 24.

推荐答案

MEDIA_ERR_DECODE 的定义

媒体错误代码的 HTML5 规范

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

An error of some description occurred while decoding the media resource, after the resource was established to be usable.

Mozilla MediaError 文档

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

Despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error.

Firefox 错误消息(如本支持票)

Firefox error message (as in this support ticket)

视频播放由于损坏问题或因为视频使用的浏览器不支持的功能而中止.

The video playback was aborted due to a corruption problem or because the video used features your browser did not support.

解雇的常见原因

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

  Common reasons for firing

  • The video is encrypted, but you failed to decrypt it. This can be due to various reasons:

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

    1) Encrypting a video with multiple DRM schemes (rather than just one) can cause decryption to fail on some browsers;

    2)您在开始播放之前忽略了对视频的解密(可能在您完成许可申请之前不小心将其设置为自动播放)；

    2) You neglected to decrypt the video before it started playing (perhaps it's accidentally set to auto-play before you've completed the license request);

    3) 没有足够的资源来解码视频，因为多个视频缓冲区(即使它们不是加密视频)已经用完.

    3) There are insufficient resources to decode the video because several video buffers (even if they're not encrypted videos) have been used up already.

    您的浏览器不支持特定的媒体格式(例如 DASH).这可能可以通过插件修复，具体取决于媒体类型.

    Your browser doesn't support the particular media format (eg. DASH). This may be remediable with a plugin, depending on the media type.

    您在 元素上设置了错误的 MIME 类型；请注意，某些浏览器更喜欢声明不同的 MIME 类型，以便对某些视频格式进行解码.

    You have set the wrong MIME type on your <source> element; note that certain browsers prefer different MIME types to be declared in order to decode certain video formats.

    过多的视频缓冲区已用完而未清除.

    Too many video buffers have been used up without being cleared.

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

    As the error fires fairly indeterminately, it seems like a resources issue rather than any of the other possibilities. You have six audio and video elements playing one-after-another, so you should clear each one out each time they have delivered their media. You should also not load all six side-by-side.

    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 相关的这个答案的类似案例.

    It's a similar case to this answer related to iOS.

    这篇关于HTML5 视频 MEDIA_ERR_DECODE 随机出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！