天道酬勤,学无止境

HTML5 video MEDIA_ERR_DECODE occurs randomly

问题

我正在开发的项目女巫包含 6 个音频和视频元素,它们一个接一个地播放。 发布前的代码顺序是这样的:

  1. 预加载所有媒体资源直到“canplaythrough”
  2. 播放视频-1
  3. 停止 video-1 并播放 audio-1
  4. 停止音频 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。

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

回答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再也没有发生过。

受限制的 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>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 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: preloading all media resources till "canplaythrough" playing video-1 stoping video-1 and playing audio-1 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
  • 多次播放后 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 可以做到,为什么