HTML 5 wideo. Zwracanie błędu odtwarzania z elementem source zamiast attr

Question

Chciałbym dodać obsługę błędów do prostego elementu wideo HTML5. Im użyciu tego kawałek kodu, który pojawia się wszędzie 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> 

Przede działa dobrze i mam okno alertu żwawy po załadowaniu strony .

Jeśli jednak nie mam atrybutu "src" i zamiast tego używam znacznika <source> w elemencie <video> "onerror (zdarzenie)", nie uruchamia się? Przykładowy znacznik:

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

Uwaga Podałem oba elementy wideo powyżej identyfikatorów "a" i "b".

Może ktoś wyjaśnić, dlaczego w poniższym kodzie:

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

dostać tylko ostrzeżenie dla „a” i „b” nie

muszę użyć tagu <source> jak będę mieć stwardnienie typu nośnika dla różnych urządzeń itp

Dzięki z góry za żadnych odpowiedzi/komentarze

S

Answer 1

Jeśli źródłem są same źródła, errors in loading sources must be caught from the <source> elements sami. Jednak aby sprawdzić, czy wszystkie elementy <source> nie powiodły się, check the <video> element's networkState property, jeśli jest to NETWORK_NO_SOURCE.

Więcej szczegółów na następujących tutaj:

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

Here's a sample code gdy pierwsze źródło nie można załadować i generuje błąd w konsoli:

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 (przy użyciu ładowarki, aby uniknąć skryptów 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)); 
}