Question

我有一个视频标签，下面是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;
             }
            }
        }

提前感谢您的帮助。

Answer 1

好吧，我不确定你是否可以通过window元素得到错误...但如果你查看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>

Answer 2

重要的是，加载错误不在视频标记上，而是在视频标记内的源标记上，并且事件必须附加到源标记的src属性，然后您可以使用parentNode.id来寻址正确的视频标记并在错误发生时及其发生的确切位置处理错误。

我使用一系列带编号的视频标签和一个带有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");

无法绑定Video元素的Error事件

2 个答案: