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