HTML 5 Video. Trả về lỗi phát lại với phần tử nguồn thay vì attr

Question

Tôi đang tìm cách thêm một số xử lý lỗi vào phần tử video HTML5 đơn giản. Im sử dụng đoạn mã này xuất hiện ở khắp mọi nơi 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> 

Trên hoạt động tốt và tôi nhận được một hộp cảnh báo linh hoạt khi tải trang .

Tuy nhiên nếu tôi không có thuộc tính "src" và thay vào đó sử dụng thẻ <source> trong phần tử "onerror (event)" <video> "onerror (event)" không kích hoạt? Ví dụ đánh dấu:

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

Lưu ý: Tôi đã cung cấp cả hai phần tử trên các id "a" và "b".

Ai đó có thể giải thích tại sao trong đoạn mã sau:

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

tôi chỉ nhận được một cảnh báo cho "a" và không "b"

tôi cần phải sử dụng thẻ <source> như tôi sẽ phải nhiều loại phương tiện cho các thiết bị khác nhau vv

Cảm ơn trước cho bất kỳ câu trả lời/bình luận

S

Answer 1

Nếu nguồn có liên quan, errors in loading sources must be caught from the <source> elements. Tuy nhiên, để kiểm tra xem tất cả các thành phần <source> có bị lỗi hay không, check the <video> element's networkState property nếu đó là NETWORK_NO_SOURCE.

tin chi tiết về những điều sau đây:

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

Here's a sample code khi nguồn đầu tiên không tải và kết quả đầu ra một lỗi vào giao diện điều khiển:

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 (sử dụng bộ xử lý để tránh kịch bản 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)); 
}