Javascript HTML5视频。使用源元素而不是attr返回播放错误

我想给一个简单的HTML5视频元素添加一些错误处理。 我正在使用随处可见的这段代码：

JS

function playbackFailed(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;
   }
}

HTML

<video id="a" src="tgif.vid" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400"></video>

上面的工作很好，当页面加载时，我会得到一个快速的警报框

但是，如果我没有“src”属性，而是在

元素中使用

标记，“onerror（event）”不会触发？标记示例：

<video id="b" autoplay controls onerror="playbackFailed(event)" poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400">
    <source src="tgif.vid">
</video>

注意，我已经在id“a”和“b”上面给出了这两个视频元素

有人能用下面的代码解释一下原因吗：

<script>
var a = document.getElementById('a');
var b = document.getElementById('b');

a.addEventListener('error', function(e){alert('error event on a')});
b.addEventListener('error', function(e){alert('error event on b')});

</script>

var a=document.getElementById（'a'）；
var b=document.getElementById（'b'）；
a、 addEventListener（'error'，函数（e）{alert（'error event on a'）}）；
b、 addEventListener（'error'，函数（e）{alert（'error event on b'）}）；

我只收到“a”而不是“b”的警报

我需要使用

标签，因为我将为不同的设备等提供多种媒体类型

提前感谢您的回答/评论

S

如果涉及来源，则其本身。但是，要检查所有

元素是否都失败，如果它是

网络\u否\u源

有关以下内容的更多详细信息，请参见此处：

当第一个源无法加载并向控制台输出错误时：

HTML

JS（使用处理程序避免使用inine脚本）

var sources=document.getElementsByTagName（'source'），
我
对于（i=0；i

您是否已使用其他浏览器验证过它？尝试将侦听器添加到b的源标记，而不是视频标记。上述网络状态为“3”，视频将播放。如果我把虚拟视频放在上面的例子中，结果失败了。现在还是3点。我实际上需要显示错误。@sidarcy-hmm。。。尝试检查错误（即处理程序中的

e

）。就我所测试的而言，

中的错误并不意味着

中的错误（视频的

error

属性为空）。我还没有在视频中做过那么多的错误捕获。

networkState

的链接不太正常。应该是：

<video id="b" autoplay controls poster="http://img.rasset.ie/000736d2-512.jpg" width="620" height="400">
    <source src="tgif.vid" />
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.mp4" />
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.webm" />
    <source src="http://html5doctor.com/demos/video-canvas-magic/video.ogg" />
</video>

var sources = document.getElementsByTagName('source'),
    i;

for (i = 0; i < sources.length; i++) {
    (function (i) {
        sources[i].addEventListener('error', function (e) {
            console.log('Error loading: '+e.target.src);
        });
    }(i));
}