Comment Attraper NETWORK_NO_SOURCE Erreurs avec une Balise Vidéo HTML5

Si aucun des < source > balises prévues pour un HTML5 < video > tag sont jouables, je veux afficher un message d'erreur.

Selon cette page sur le Mozilla Developer Network, il semble que je dois vérifier la networkState propriété de l'élément vidéo pour voir si des sources chargés, chacun séparé de la source de la balise jette sa propre erreur lorsqu'il ne parvient pas à charger.

Pour détecter tous les éléments enfants n'ont pas réussi à charger, vérifier la valeur de l'élément média de networkState attribut. Si c'est HTMLMediaElement.NETWORK_NO_SOURCE, vous savez que toutes les sources d'échec du chargement.

Mais à quel point dois-je vérifier la networkState? Si je vérifie immédiatement sur l'appel de video_tag.load(), il me dit toujours la networkState est NETWORK_NO_SOURCE même si la source des éléments sont valides et que la vidéo joue bien. Donc, je suppose que je hvae attendre jusqu'à ce que les balises de la source ont été essayé par le navigateur.

Voici le test:

var state = this._video_tag.networkState;       
console.log( 'networkState', state );
if( state == this._video_tag.NETWORK_NO_SOURCE )
{
    throw new Error( 'No valid sources' );
}

J'ai essayé toutes de la vidéo à la suite de l'élément événements avec source invalide tags: loadstart, loadedmetadata, loadeddata se & erreur avec les résultats suivants (dans Firefox):

loadstart: appelés, mais networkState est NETWORK_LOADING
loadedmetadata: pas appelé
loadeddata se: pas appelé
erreur: pas appelé

Cependant, si j'découvrez la vidéo de la balise dans Firebug, la networkState est NETWORK_NO_SOURCE comme prévu.

Quel cas dois-je utiliser pour contrôler le moment de vérifier la balise vidéo, ou est-il une meilleure manière de faire ceci?

OriginalL'auteur voidstate | 2012-02-07

html5-video javascript

j'ai utilisé qqch pour vérifier l'état du réseau de la vidéos. ceci est pris à partir officielles du w3c html5 page ( http://dev.w3.org/html5/spec/Overview.html#the-video-element )

<script>
 function failed(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;
   }
 }
</script>
<video src="tgif.vid" autoplay controls onerror="failed(event)"></video>

Dans FF, e.cible.l'erreur n'est pas défini pour à la fois la vidéo et l'élément source. :/
Cette solution ne fonctionnent pas si vous utilisez le <source> tag et pas la src="" attribut de l'élément multimédia.

OriginalL'auteur longilong

8

Si vous utilisez des balises de la source vous pouvez définir la onerror attribut sur la dernière source de la balise dans la liste à la place. Voir le bas de la section 4.8.8 sur cette page pour plus de détails.

De citer référence:
Si l'auteur n'est pas sûr si les agents utilisateurs seront en mesure de rendre le
ressources pour les médias fourni, l'auteur peut écouter l'événement d'erreur sur
le dernier élément source et de déclencher les secours comportement:
```
<script>
 function fallback(video) {
   //replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>
```
Cet exemple n'est pas parfait parce que vous n'obtenez pas l'objet d'événement comme vous le faites lorsque la onerror attribut est sur la balise vidéo (qui ne fonctionne que si vous avez un attribut src de la balise vidéo plutôt que dans une série de balises. Cependant, je crois que vous pouvez ensuite récupérer l'état d'erreur à partir de la balise vidéo avec le networkState JS variable sur cette balise. Je n'ai pas testé. Donc, c'est à vous à ce point. Cela ressemble à ce que j'ai ici sont peut-être satisfaisant pour vos besoins.

Notes:

Tout en place, vous pouvez écouter un évènement "erreur" sur la dernière balise source, j'ai trouvé que ce n'était pas fiable. Dans les cas où la précontrainte de l'attribut n'est pas défini sur aucun, je ne pouvais pas trouver un moyen fiable pour ajouter un écouteur pour l'événement avant l'événement déclenché. Cela m'a forcé à utiliser le onerror attribut.

Si vous ne trouver un moyen fiable pour écouter l'événement que je voulais ajouter cette remarque. Selon cette question de Chrome l'événement d'erreur sur la source de la balise n'a PAS de bulle qui signifie que vous avez à écouter sur cette balise spécifique.

OriginalL'auteur radicaledward101
7

La "erreur" de l'événement n'est pas appelée parce qu'elle est déclenchée par les éléments de l'intérieur, et pour faire de l'événement également être déclenchés sur l'élément, vous devez utiliser la méthode addEventListener avec le useCapture paramètre est défini sur true, comme ceci:
```
video.addEventListener('error', callback, true);
```
Et puis à l'intérieur de la fonction de rappel vous pouvez vérifier l'networkState de la propriété, qui va être NETWORK_NO_SOURCE si la vidéo ne peut pas lire les sources.

Découvrez les docs du MDN au sujet de la méthode addEventListener et la useCapture paramètre
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

OriginalL'auteur Tiborg

Vous devez vous connecter pour publier un commentaire.