HTML 5 Video. Rückkehr Fehler bei Wiedergabe mit source-element anstelle von attr

Ich bin auf der Suche, um etwas Fehler-handling, um eine einfache HTML5-video-element.
Im mit diesem Stück code, das erscheint überall 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>

Oben funktioniert einwandfrei und ich bekomme eine bissig-alert-box, wenn die Seite geladen wird.

Jedoch wenn ich nicht über ein "src" - Attribut, und verwenden Sie stattdessen die <source> tag innerhalb der <video> element "onerror(event)" nicht ausgelöst? Beispiel-markup:

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

Hinweis, ich habe die beiden videos, die Elemente über den Kennungen "a" und "b".

Kann mir jemand erklären, warum in dem folgenden code:

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

Bekomme ich nur eine Warnung für "ein" und nicht "b"

Ich die <source> tag wie ich haben werde, mehrere Medien-Typ für verschiedene Geräte etc.

Vielen Dank im Voraus für alle Antworten /Kommentare

S

  • Haben Sie überprüft, dass es mit anderen Browsern?
  • Versuchen Sie, die Zuhörer auf die source-tag für b-und nicht das video-tag
InformationsquelleAutor sidarcy | 2013-04-09
  1. 9

    Wenn die Quellen beteiligt sind, Fehler beim laden der Quellen muss gefangen werden von den <source> - Elemente selbst. Jedoch, um zu überprüfen, ob alle <source> Elemente fehlgeschlagen, überprüfen Sie die <video> - element im networkState Eigenschaft wenn es NETWORK_NO_SOURCE.

    Mehr details auf den folgenden Sie hier:

    Hier ist ein Beispiel-code , wenn die erste Quelle schlägt fehl und gibt eine Fehlermeldung in der Konsole:

    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 (mit Handler zu vermeiden inine-Skripte)

    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));
}
    • Hallo Joseph, den Netzwerk-Status für die oben genannten "3 -" und das video wird abgespielt. Wenn ich die dummy-videos in dem obigen Beispiel also mit dem Ergebnis ausfallen. Es ist immer noch 3. Ich wirklich brauchen, um den Fehler anzuzeigen.
    • hmm... versuchen Inspektion der Fehler (das ist die e im hf). Soweit ich getestet habe, ein Fehler in der <source> bedeutet nicht, dass ein Fehler in <video> (video error - Eigenschaft ist null). Ich habe es nicht so weit mit der Fehlerbehebung in videos.
    • Der link für networkState funktioniert nicht ganz richtig. Es soll werden: developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/...
    InformationsquelleAutor Joseph
Schreibe einen Kommentar