无法为视频元素绑定错误事件答案

【问题标题】：Unable to bind Error event for Video element无法为视频元素绑定错误事件
【发布时间】：2012-08-08 21:24:06
【问题描述】：

我有一个视频标签，下面是html

<video  id="videoId" controls="controls">
<source src="../video/trailer.mp4" type="video/mp4" />
</video>

我想在这个视频元素上添加 onError 事件。我已经编写了触发但它不起作用的代码我该如何绑定它。可能是我错过了什么

window.onerror=function(){
            var myvid = document.getElementById('videoId');
            if (myvid.error) {
             switch (myvid.error.code) {
               case myvid.error.MEDIA_ERR_ABORTED:
                  alert("You stopped the video.");
                  break;
               case myvid.error.MEDIA_ERR_NETWORK:
                  alert("Network error - please try again later.");
                  break;
               case myvid.error.MEDIA_ERR_DECODE:
                  alert("Video is broken..");
                  break;
               case myvid.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
                  alert("Sorry, your browser can't play this video.");
                  break;
             }
            }
        }

提前感谢您的帮助。

【问题讨论】：

标签： html html5-video jquery

【解决方案1】：

好吧，我不确定您是否可以在窗口元素上得到错误...但是如果您在此处查看 html5 规范：http://www.w3.org/TR/2010/WD-html5-20100624/video.html#video，您会发现以下脚本块：

<script>
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 corruption problem or because the video used features your browser did not support.');
   break;
 case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
   alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
   break;
 default:
   alert('An unknown error occurred.');
   break;
 }
}
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

【讨论】：

感谢'longilong'的回复。我已经尝试过了，但如果我想绑定这个视频元素并且不想在元素标签处给出 onerror="failed(event)"？我该如何绑定，我使用了 $('#videoId')。 on('onerror',function(){alert('Error')});但它只会在我错过视频元素的关闭“>”时触发。如果我编写视频元素标签，如
不知道你想要什么，但如果你正在使用 f.e. mootools 你应该能够像这样绑定它 $('videoId').addEvent('onerror', function(evt){ alert(evt.target.error.code) })

【解决方案2】：

重要的是，加载错误不是发生在video标签上，而是发生在video标签内的source标签上，并且事件必须附加到source标签的src属性，然后您可以使用parentNode.id来处理正确的video标签并在错误发生时以及发生的确切位置对错误进行处理。

我使用一系列带编号的视频标签和一个带有 Popcorn.js 对象的数组来处理页面上的视频。

这里有我的解决方案：

  $("source").error(function () {
    var tagStr = this.parentNode.id;
    var pop = videos[tagStr.charAt(str.length-1)];
    if (pop.media.networkState == pop.media.NETWORK_NO_SOURCE) {
      doSomething;
    }
  }).attr("src");

【讨论】：