HTML5 video MEDIA_ERR_DECODE occurs randomly

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.


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

When the video file size is too large, you may encounter this problem. Recommended setting to:

video.preload = "auto"

Change to:

video.preload = "metadata"

In my case, it was because I was streaming high bitrate HLS content, and not limiting how much to buffer.

The SourceBuffer was full and appendBuffer failed, but in Chrome (Chrome 91), the error message was a misleading MEDIA_ERR_DECODE.

This can happen rather quickly, start the video at a certain timestamp, play it for 30 seconds and MEDIA_ERR_DECODE error will reliably happen, and it seems to happen reliably at a certain video timestamp, which led me to believe it was indeed due to some problem in the video encoding.

But it was not. A professional from my VOD hosting platform suggested that I limit the buffer length, by changing (I'm using hls.js) maxMaxBufferLength from the default 600s to 30s, the problem was solved! MEDIA_ERR_DECODE never happened again after I made this change.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • 多次播放后 iOS UIWebView 中 HTML5 视频的 MEDIA_ERR_DECODE(MEDIA_ERR_DECODE on HTML5 video in iOS UIWebView after many plays)
  • 检测到HTML5音频元素文件未找到错误(Detecting HTML5 audio element file not found error)
    问题 如果音频元素src属性指向不存在的文件,我试图使浏览器显示警报,但是如果附加了“错误”事件,则不会得到任何响应。 这是我的问题和我尝试过的东西的小提琴。http://jsfiddle.net/Xx2PW/7/ HTML: <p>Non existent audio files - should return an error <audio preload="auto"> <source src="http://example.com/non-existant.wav" /> <source src="http://example.com/non-existant.mp3" /> <source src="http://example.com/non-existant.ogg" /> </audio> </p> <p>Existing audio file - should just play <audio preload="auto"> <source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" /> </audio> </p> 和JS: playerMarkup = "<a class=\"player\">Play</a>"; audioTags = $("audio"); audioTags.before
  • When should HTML5 video fall back to Flash player?
    I'm working on implementing a fallback mechanism for the HTML5 video player. I've got a way to replace it with the swfobject Flash player, but how should I detect if any issues have developed? In other words, if we use the following list of error events that can be thrown, which one should trigger the Flash player replacement? Or should we simply do a replacement if any error is thrown? Also, where should the onError handler be called? I'm thinking on the video tag, but want to make sure. Your guidance is much appreciated. Thanks. function failed(e) { // video playback failed - show a message
  • HTML5 视频什么时候应该回退到 Flash 播放器?(When should HTML5 video fall back to Flash player?)
    问题 我正在为 HTML5 视频播放器实现回退机制。 我有办法用 swfobject Flash 播放器替换它,但是我应该如何检测是否出现了任何问题? 换句话说,如果我们使用以下可以抛出的错误事件列表,哪个应该触发 Flash 播放器替换? 或者,如果抛出任何错误,我们应该简单地进行替换吗? 另外,应该在哪里调用 onError 处理程序? 我正在考虑视频标签,但想确定一下。 非常感谢您的指导。 谢谢。 function failed(e) { // video playback failed - show a message saying why switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert('You aborted the video playback.'); break; case e.target.error.MEDIA_ERR_NETWORK: alert('A network error caused the video download to fail part-way.'); break; case e.target.error.MEDIA_ERR_DECODE: alert('The video playback was aborted due to a
  • 如何检查HTML5音频是否出现了不同的错误(How to check if HTML5 audio has reached different errors)
    问题 具体来说,如果206个音频请求之一失败并且缓冲停止,是否有办法检测到该状态? 还是我应该通过将缓冲量与过去的量进行比较来检查缓冲是否停止了? 另外,我如何检查指定的来源是否失败,您能否将其指向另一个来源? 回答1 1.具体来说,如果对音频的请求之一失败并且缓冲停止,是否可以检测到该状态? 是的,没有什么方法可以做到这一点! 但是,如果要捕获错误类型,可以将错误事件侦听器附加到源: $('audio').addEventListener('error', function failed(e) { // audio playback failed - show a message saying why // to get the source of the audio element use $(this).src switch (e.target.error.code) { case e.target.error.MEDIA_ERR_ABORTED: alert('You aborted the video playback.'); break; case e.target.error.MEDIA_ERR_NETWORK: alert('A network error caused the audio download to fail.'); break; case e
  • 如何在HTML5视频上设置缩略图?(How to set the thumbnail image on HTML5 video?)
    问题 有没有办法在HTML5视频上设置缩略图? 我想在播放之前先看一些图片。 我的代码如下所示: <video width="470" height="255" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4" width="470" height="255"> <embed src="video.swf" width="470" height="255"> </object> </video> 谢谢! 回答1 将poster="placeholder.png"添加到视频标签。 <video width="470" height="255" poster="placeholder.png" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> <object data="video.mp4"
  • HTML5 视频正在特定站点中播放,但不在我的域中,即(HTML5 video is playing in particular site but not in my domian ie)
    问题 我有一个从某个外部站点下载的 mp4 视频。 该视频在该教程站点中播放良好。 但不在我的网站上。 此问题仅在 ie9 浏览器中。 来源 <!DOCTYPE html> <html> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </body> </html> 我已经下载了mp4文件和ogg文件,这对 ie9 来说并不重要。 在以下链接中,视频工作正常。 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all 只有我正在使用相同的来源和视频,但视频没有播放。我也检查了权限。 请帮我解决这个问题 回答1 首先加载页面并按 F12 以调出开发人员工具,然后弹出到控制台中的控制台选项卡,使用下面的脚本获取对视频对象的引用(如果视频元素不是第一个视频元素,那么您将需要调整数组值)。 document.getElementsByTagName("video")[0].error.code
  • 如何在网络浏览器中播放MKV视频?(How to playback MKV video in web browser?)
    问题 我正在尝试使用Mozilla或Chrome在线播放带有MPEG4视频编解码器和AC3音频编解码器的MKV视频。 我尝试了多种方法,包括本机HTML5,该方法可播放视频但不播放音频,并且从我阅读的内容来看,AC3是专有编解码器,因此不包含在受支持的编解码器中。 的代码如下: <video width='1024' height='768' controls autoplay> <source src="path_to_src" type='video/x-matroska'> </video> 然后,我尝试使用VLC Web插件(因为我知道VLC可以正确播放文件),但尚未获取它来播放任何文件,因此在使用此方法的示例中似乎并没有太多的一致性。 到目前为止,这是我使用VLC插件尝试过的内容: <embed type="application/x-vlc-plugin" version="VideoLAN.VLCPlugin.2" width="1024" height="768" id="vlc" autoplay="yes" target="path_to_file"></embed> 这里的VLC页面说要添加以下内容: <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http:/
  • React Video re-rendering issue in iOS
    I've working on React app where you have 20+ steps, and each steps re-renders video component with new source. The problem I got is that iOS browsers (safari and chrome) after re-rendering video few times it stops playing it. import React, {Component} from "react"; import PropTypes from "prop-types"; import LoadingPoster from "assets/images/loading_video_poster.jpg"; export default class Video extends Component { static propTypes = { videoUrl: PropTypes.string.isRequired }; constructor(props) { super(props); this.state = { videoUrl: this.props.videoUrl }; } onVideoError = (e) => { console.log(
  • iOS中的React Video重新渲染问题(React Video re-rendering issue in iOS)
    问题 我一直在研究 React 应用程序,其中有 20 多个步骤,每个步骤都使用新源重新渲染视频组件。 我遇到的问题是 iOS 浏览器(safari 和 chrome)在重新渲染视频几次后停止播放。 import React, {Component} from "react"; import PropTypes from "prop-types"; import LoadingPoster from "assets/images/loading_video_poster.jpg"; export default class Video extends Component { static propTypes = { videoUrl: PropTypes.string.isRequired }; constructor(props) { super(props); this.state = { videoUrl: this.props.videoUrl }; } onVideoError = (e) => { console.log('error', e.target.error.code); }; render = () => { return ( <video key={this.props.videoUrl} onError={this.onVideoError} muted
  • Azure Media Player Silverlight fallback not working
    I have used the azure media player with my project, it will play multiple adaptive bit rate streamed videos in an asp.net page, the best part is, it is working superb in html5 and flash but it will get stuck at spinner image in silverlight fallback. Below is the code I have used. I have also tried to get errors but it is not hitting the event listener code added for errors, but the play and pause events are working fine where flash and html5 is used, but silverlight fallback is not working at all. <link href="https://amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel=
  • 如何在 Javascript / Html5 中随机化视频播放列表(How to randomize video playlist in Javascript / Html5)
  • Azure 媒体播放器 Silverlight 回退不起作用(Azure Media Player Silverlight fallback not working)
    问题 我在我的项目中使用了 azure 媒体播放器,它将在 asp.net 页面中播放多个自适应比特率流视频,最好的部分是,它在 html5 和 flash 中运行良好,但它会卡在 Silverlight 中的微调图像上倒退。 下面是我使用过的代码。 我也试图得到错误,但它没有命中为错误添加的事件侦听器代码,但播放和暂停事件在使用 flash 和 html5 的情况下工作正常,但 Silverlight 回退根本不起作用。 <link href="https://amp.azure.net/libs/amp/1.3.0/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> <script src="https://amp.azure.net/libs/amp/1.3.0/azuremediaplayer.min.js"></script> <div class="marginBlock"> <h3> <asp:Label ID="lblTitle" runat="server"><%=Title.ToString()%></asp:Label> </h3> <video id="<%=mediaPlayerID %>" class="azuremediaplayer amp-default-skin amp
  • Automatic fullscreen html5 video playback?
    问题 回答1 这应该有效: 创建一个带有 1 个带有自动播放属性的视频标签的空 html 页面然后使用 JavaScript 创建一个包含您要播放的视频的所有路径的数组将函数附加到视频标签的“结束”事件在函数内部生成一个随机索引Math.floor(Math.random() * clipPaths.length); 使用生成的索引从数组中获取随机路径将路径设置为视频标签的“src”属性 您只需将所有路径放在 clipPaths 数组中... <!DOCTYPE html> <html> <head> <style> video#myVideo { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%)
  • How to randomize video playlist in Javascript / Html5
    I'm a beginner in JS and I would like to know how to randomize a video playlist (JS), i want to use a canvas to see the videos "protected" (pass the videos trough the canvas) and then loop the videos to start again, video continous playlist randomizing. Non-stop Help would be really appreciated! THANKS in advance!!
  • 背景视频 HTML5(Background Videos HTML5)
    问题 我想用不同的视频创建背景,当用户刷新页面更改为其他视频时。 现在我有了这个,也许用 javascript 我可以做到,但我不知道怎么做。 <video loop="loop" preload="auto" muted="" autoplay="" poster="/templates/smartone/images/video/fondo.jpg" id="bgvid"> <source src="/templates/smartone/images/video/fondo1.mp4" type="video/mp4"> <source src="/templates/smartone/images/video/fondo1.webm" type="video/webm"> </video> 回答1 正如@zmehboob 所说,您必须制作一个视频列表以随机选择一个。 为此,我使用一个包含不同可用类型的object来创建source元素,然后在遍历source元素的扩展之前为 src 随机选择一个。 这是一些代码(香草): // first create the list with extensions as parameters var videoList = { 'http://media.w3.org/2010/05/sintel/trailer': ['mp4',
  • Rails 4 - How to serve video?
    I'm using Rails 4 for my web application and I'm using VideoJS to display it, like: <video id="video1" class="video-js" controls preload="auto" width="640" height="264" poster="{{pCtrl.video.poster}}" src="<%= @video.file %>"> <source src="<%= @video.file %>" type="video/<%= @video.file.file.filename.last(3) %>"> </video> I was always getting this error from VideoJS: VIDEOJS: ERROR: (CODE:3 MEDIA_ERR_DECODE) The video playback was aborted due to a corruption problem or because the video used features your browser did not support. When I open Chrome's developper tools, I see that the video (the
  • 如何在点击和页面加载时随机化视频(How to randomize video on click and on page load)
  • 从html5动画创建视频的最佳方法[关闭](best way to create video from html5 animation [closed])
    问题 关闭。 此问题不符合 Stack Overflow 准则。 它目前不接受答案。 想改善这个问题吗? 更新问题,使其成为 Stack Overflow 的主题。 1 年前关闭。 改进这个问题 我想为视频播客做一个简短的介绍。 作为一个极客 Web 开发人员并且还没有访问或了解动画工具的知识,我想我可能会尝试使用各种 html5 技术进行介绍。 问题是,如何将其转换为可以轻松放入 iMovie 的视频剪辑? 如果必须的话,我认为如果我只通过使用 getImageData 每帧导出一个 png 来使用画布,就可以实现这一点。 唯一的缺点是我仅限于画布。 我希望使用所有新的 html5/css3/svg 技术。 我不需要这个功能来为一般的网络使用工作,只是为了我自己,所以我很高兴任何需要安装等才能让它工作的东西。 如果必须的话,我想我可能可以使用视频屏幕捕获工具,但我希望有一个完整的开源链。 最后,我希望我将创建一系列 png 并使用 ffmpeg 将它们组合在一起,我只是希望找到一种以自动化、开源的方式完成此操作的好方法。 更新我只是想澄清一下,我主要尝试做的是使用 HTML5 而不是 Flash 之类的东西,但我不想将其提供给互联网上的其他人,我想将其转换为视频,并且永远不需要离开我的电脑,它实际上是一台 mac,而不是 Linux 服务器。 如果 flash 可以做到,为什么
  • Chrome 中的 HTML5 视频奇怪的渲染错误(HTML5 video strange rendering error in Chrome)
    问题 我正在尝试创建一些东西,当用户点击 HTML5 视频的微型版本时,会出现一个弹出窗口,显示视频的放大版本(有点像 Instagram)。 然而,似乎只有在 Chrome 中有一个奇怪的错误,在我退出弹出窗口并通过单击毯子(大约 3-5 次)反复重新打开它后,放大的视频无法在弹出窗口中正确呈现(它显示为无法播放的微型黑屏)。 如果我在那之后点击它们,所有其他视频也将无法正确放大。 当我反复点击 3.6MB 的视频时会发生这种情况,但当我点击 61KB 的小视频时似乎不会发生这种情况,所以我不确定文件的大小是否与它有关。 更奇怪的是,当视频在反复打开和关闭弹出窗口后无法呈现时,按CTRL + SHIFT + i ,这会调出检查器正确呈现视频。 仅使用 alert() 向放大的视频添加点击事件也可以正确呈现。 在发生这种情况之前,mp4 文件肯定可以正常播放。 刚刚注意到一些事情——我打开和关闭弹出窗口的次数越多,Chrome 刷新页面所需的时间就越长,它在左下角显示“正在处理请求”或“正在等待可用的套接字”。 新更新- 问题似乎与套接字有关。 我对这个主题不是很熟悉,但 Chrome 有“每组最多 6 个插槽”。 每次我从较小的缩略图视频中获取src并将其插入较大的视频时,通过以下代码: var media_to_append=...; 它创建一个新的套接字。 这发生在 3.6M