So fangen Sie NETWORK_NO_SOURCE-Fehler mit einem HTML5-Video-Tag

8

Wenn keiner der & lt; Quelle & gt; Tags für ein HTML5 & lt; Video & gt; Tag ist abspielbar, ich möchte einen Fehler anzeigen.

Laut dieser Seite im Mozilla Developer Network scheint es, als müsste ich die networkState-Eigenschaft des Videoelements überprüfen um zu sehen, ob irgendwelche Quellen geladen sind, da jedes einzelne Quellen-Tag seinen eigenen Fehler wirft, wenn es nicht geladen werden kann.

  

Um zu erkennen, dass alle untergeordneten Elemente nicht geladen werden konnten, überprüfen Sie den Wert des networkState-Attributs des Medienelements. Wenn dies HTMLMediaElement.NETWORK_NO_SOURCE ist, wissen Sie, dass alle Quellen nicht geladen werden konnten.

Aber an welchem ​​Punkt sollte ich den networkState überprüfen? Wenn ich sofort den Aufruf von video_tag.load () überprüfe, sagt es mir immer, dass networkState NETWORK_NO_SOURCE ist, auch wenn die Quellelemente gültig sind und das Video gut abgespielt wird. Daher gehe ich davon aus, dass ich warten muss, bis die Quell-Tags vom Browser ausprobiert wurden.

Hier ist der Test:

%Vor%

Ich habe alle folgenden Videoelementereignisse mit ungültigen Quellentags ausprobiert: loadstart, loadedmetadata, loadeddata & amp; Fehler mit folgenden Ergebnissen (in Firefox):

  • loadstart: called, aber networkState ist NETWORK_LOADING
  • loadedmetadata: nicht aufgerufen
  • loadeddata: nicht aufgerufen
  • Fehler: nicht aufgerufen

Wenn ich jedoch das Videotag in Firebug auschecke, ist networkState wie erwartet NETWORK_NO_SOURCE.

Welches Ereignis sollte ich verwenden, um zu kontrollieren, wann das Video-Tag überprüft werden soll, oder gibt es eine bessere Möglichkeit, dies zu tun?

    
voidstate 07.02.2012, 11:26
quelle

3 Antworten

8

Ich habe dies verwendet, um den Netzwerkstatus der Videos zu überprüfen. Dies stammt von der offiziellen w3c html5 Seite ( Ссылка )

%Vor%     
longilong 07.02.2012 14:28
quelle
8

Wenn Sie Quellen-Tags verwenden, können Sie stattdessen das Attribut "onerror" für das letzte Quell-Tag in der Liste festlegen. Siehe unten in Abschnitt 4.8.8 Seite für weitere Details.

Zitat aus dieser Referenz:

  

Wenn der Autor nicht sicher ist, ob Benutzeragenten alle das rendern können   Medienressourcen zur Verfügung gestellt, kann der Autor auf das Fehlerereignis hin hören   das letzte Quellelement und Auslöseverhalten auslösen:

%Vor%

Dieses Beispiel ist nicht perfekt, da Sie das Ereignisobjekt nicht wie beim Attribut onerror auf dem Videotag erhalten (was nur funktioniert, wenn Sie ein src-Attribut im Video-Tag haben und nicht in einer Reihe von Ich glaube jedoch, dass Sie dann den Fehlerstatus aus dem Video-Tag mit der Variable networkState JS auf diesem Tag abrufen können. Ich habe das jedoch noch nicht getestet. Es liegt also an Ihnen, es klingt wie das, was ich habe hier könnte für Ihre Bedürfnisse zufriedenstellend sein.

Anmerkungen:

Obwohl Sie stattdessen auf das letzte Quell-Tag auf ein "Error" -Ereignis warten können, habe ich festgestellt, dass dies unzuverlässig war. In Fällen, in denen das preload-Attribut nicht auf "none" gesetzt ist, konnte ich keinen Weg finden, zuverlässig einen Listener für das Ereignis hinzuzufügen, bevor das Ereignis ausgelöst wurde. Dies zwang mich, das onerror-Attribut zu verwenden.

Wenn Sie einen Weg finden, zuverlässig auf das Ereignis zu hören, wollte ich diese Notiz hinzufügen. Laut diesem Chromium-Problem wird das Fehlerereignis auf dem Quell-Tag NICHT ausgelöst, was bedeutet Sie müssen es an diesem bestimmten Tag hören.

    
radicaledward101 05.09.2013 16:09
quelle
6

Das Ereignis 'error' wird nicht aufgerufen, weil es von den Elementen ausgelöst wird. Um das Ereignis auch für das Element auszulösen, müssen Sie die Methode addEventListener mit dem Parameter useCapture auf true wie folgt verwenden:

%Vor%

Und dann können Sie innerhalb des Callbacks die Eigenschaft networkState überprüfen, die NETWORK_NO_SOURCE sein wird, wenn das Video die Quellen nicht abspielen kann.

Überprüfen Sie die Dokumente aus MDN über addEventListener und den useCapture-Parameter Ссылка

    
Tiborg 06.08.2015 15:33
quelle

Tags und Links