HTML5 video MEDIA_ERR_DECODE occurs randomly

Question

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. preloading all media resources till "canplaythrough"
2. playing video-1
3. stoping video-1 and playing audio-1
4. stoping audio-1 and playing video-1 again.

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 latest Opera - occurs
• Win10 latest Chrome - fine
• MacOS all browsers - fine
• Another MacOS latest Chrome - occurs in 1 of 10 cases
• IPhone all browsers - fine
• IPad all browsers - fine

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

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

Answer 1

Definitions for MEDIA_ERR_DECODE

HTML5 spec for for media error codes

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

Mozilla MediaError documentation

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

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) Encrypting a video with multiple DRM schemes (rather than just one) can cause decryption to fail on some browsers;

  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) There are insufficient resources to decode the video because several video buffers (even if they're not encrypted videos) have been used up already.

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

• 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.

Diagnosis in your case

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.

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