HTML 5视频。用源元素而不是attr返回播放错误

Question

我正在寻找添加一些错误处理到一个简单的HTML5视频元素。 即时通讯使用此块的代码出现到处online：

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”属性，而是使用<video>元素中的<source>标记“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> 

我只得到了“A”，而不是“B”

我需要使用<source>标签，因为我将有一个警报针对不同的设备的多个媒体类型等

预先感谢任何答案/评论

小号

Answer 1

如果涉及到来源，errors in loading sources must be caught from the <source> elements自己。但是，要检查是否所有的<source>元素都失败了，check the <video> element's networkState property如果是NETWORK_NO_SOURCE。

上的更多细节在下列位置：

• HTMLMediaElement
• <source>
• Using HTML5 audio and video

Here's a sample code当第一源加载失败和错误输出到控制台：

HTML

个

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

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

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)); 
}