HTML5-Videofehlerbehandlung

Lesezeit: 4 Minuten

Ich muss mitteilen, ob das Video nicht abgespielt werden kann (“x”-Zeichen wird im Browser angezeigt).

Dieser Code funktioniert nicht. Das Ereignis “onerror” wird unter Firefox nie ausgelöst

var v = document.getElementsByTagName("video")[0];
    if ( v != undefined )
        v.onerror = function(e) {
            if ( v.networkState == v.NETWORK_NO_SOURCE )
            {
                // handle error
            }
        }

Was ist hier falsch?

HTML5 Videofehlerbehandlung
therealklanni

“onerror” ist kein gültiger Ereignistyp für <video>

Verwenden Sie stattdessen “Fehler”.

document.getElementsByTagName('video')[0].addEventListener('error', function(event) { ... }, true);

Für eine vollständige Liste der Veranstaltungen für <video> Gehe hier hin: https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

  • Die Rückgabe ist undefiniert, ich empfehle die Verwendung von jQuery $('video')[0].addEventListener

    – Ofir Attia

    12. September ’15 um 7:01


Ab Firefox 4 ist das ‘Fehler’-Ereignis versendet am <source> Element.

Und Sie sollten einen Fehlerhandler hinzufügen auf der einzigen/letzten Quelle:

HTML

<video id="vid" controls>
  <source src="https://stackoverflow.com/questions/5573461/dynamicsearch.mp4" type="video/mp4"></source>
  <source src="otherdynamicsearch.avi" type="video/avi"></source>
</video>

JS

var v = document.querySelector('video#vid');
var sources = v.querySelectorAll('source');

if (sources.length !== 0) {
    var lastSource = sources[sources.length-1];

    lastSource.addEventListener('error', function() {
        alert('uh oh');
    });
}

JQuery

$('video source').last().on('error', function() {
    alert('uh oh');
});

AngularJS

Sie können eine Anweisung zur Fehlerbehandlung erstellen (oder verwenden Sie einfach ng-Fehler):

<video id="vid" controls>
  <source src="https://stackoverflow.com/questions/5573461/dynamicsearch.mp4" type="video/mp4"></source>
  <source src="otherdynamicsearch.avi" type="video/avi" ng-error="handleError()"></source>
</video>

Wo die Fehlerbehandlungsdirektive link Funktion sollte tun (kopiert von ng-error):

element.on('error', function(event) {
    scope.$apply(function() {
        fn(scope, {$event:event});
    });
});

  • Der Link enthält nicht mehr das Wort “Fehler” und ich kann keine Informationen dazu finden.

    – Alex L

    3. Januar ’19 um 0:55

Gut zu wissen, dass Chrome und Firefox sich unterscheiden onerror Rückrufe. Der Fehler muss daher abgebildet werden. Mozilla verwendet error.originalTarget.

Hier ist ein Beispiel, wie man es mit reinem JavaScript macht:

const file="https://samples.ffmpeg.org/MPEG-4/MPEGSolution_jurassic.mp4";

window.fetch(file, {mode: 'no-cors'})
.then((response) => response.blob())
.then((blob) => {
  const url = window.URL.createObjectURL(blob);
  const video = document.createElement('video');      

  video.addEventListener('error', (event) => {
    let error = event;

    // Chrome v60
    if (event.path && event.path[0]) {
      error = event.path[0].error;
    }

    // Firefox v55
    if (event.originalTarget) {
      error = error.originalTarget.error;
    }

    // Here comes the error message
    alert(`Video error: ${error.message}`);

    window.URL.revokeObjectURL(url);
  }, true);

  video.src = url;
  document.body.appendChild(video);
});

Das obige Beispiel ordnet ein eingehendes Fehlerereignis in a Medienfehler die verwendet werden kann, um eine Fehlermeldung bei der Wiedergabe anzuzeigen.

  • Dies ist definitiv eine vollständigere Antwort! Mein Bedürfnis nach detaillierteren Informationen zur Behandlung des Fehlers wurde gelöst 🙂

    – Diniden

    20. Juni ’19 um 15:03


  • Achtung für alle, die den Standard verwenden <video><source … /></video> Struktur werden die Fehler tatsächlich auf der source Elemente als @KennyKi geteilt. Ich kann auch keine Fehlerinformationen aus den Quellfehlern abrufen (Tests auf Chrome 79.0, Safari 13.0 und Firefox 71.0)

    – Mr. Coles

    21. Dezember ’19 bei 0:53

1641733677 290 HTML5 Videofehlerbehandlung
Aleš Kotnik

Um ein Fehlerereignis abzufangen, sollten Sie verwenden video.addEventListener():

var video = document.createElement('video');
var onError = function() { // your handler};
video.addEventListener('error', onError, true);
...
// remove listener eventually
video.removeEventListener('error', onError, true);

Beachten Sie, dass der 3. Parameter von addEventListener (bei Aufnahme) sollte auf true gesetzt werden. Das Fehlerereignis wird normalerweise von Nachkommen des Videoelements (Tags) ausgelöst.

Wie auch immer, auf Video-Tag angewiesen, um zu feuern und error Ereignis ist nicht die beste Strategie, um zu erkennen, ob ein Video abgespielt wurde. Dieses Ereignis wird auf einigen Android- und iOS-Geräten nicht ausgelöst.

Die zuverlässigste Methode, die ich mir vorstellen kann, ist zuzuhören timeupdate und ended Veranstaltungen. Wenn ein Video abgespielt wurde, erhalten Sie mindestens 3 timeupdate-Ereignisse. Im Fehlerfall, ended wird zuverlässiger ausgelöst als error.

Versuchen Sie stattdessen, den Ereignis-Listener zum Tag hinzuzufügen – ich denke, das onerror-Attribut (“Fehler” -Ereignis) funktioniert jetzt beim Quell-Tag, nicht beim Video-Tag.

  • Weißt du zufällig auch, wo man es in FireFox anbinden kann? Ich versuche, ein Video abzufangen, das nicht abgespielt wird (404 oder falsches Format), in Chrome kein Problem, aber FireFox weigert sich, mir die Kontrolle über die Fehler zu geben…

    – patrick

    6. Juni ’14 um 13:47

HTML5 Videofehlerbehandlung
ubomír Drinka

Mops-Beispiel

video(src= encodeURI(item.urlVideo), type="video/mp4"  onerror="myFunction('param',this)")
script(src="https://stackoverflow.com/javascripts/onerror.js")

function myFunction(param, me) { 
    console.log(me);
    me.poster="./images/placeholder.jpg"; }

  • Weißt du zufällig auch, wo man es in FireFox anbinden kann? Ich versuche, ein Video abzufangen, das nicht abgespielt wird (404 oder falsches Format), in Chrome kein Problem, aber FireFox weigert sich, mir die Kontrolle über die Fehler zu geben…

    – patrick

    6. Juni ’14 um 13:47

.

212340cookie-checkHTML5-Videofehlerbehandlung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy