web-dev-qa-db-fra.com

DOMException: Echec du chargement car aucune source prise en charge n'a été trouvée.

J'obtiens DOMException: Echec du chargement car aucune source prise en charge n'a été trouvée in video.play (); ligne. Je ne reçois ce problème qu'après avoir ajouté video.setAttribute ('crossorigin', 'anonymous'); Je développe une application mobile, donc pour cross Origin, je dois ajouter cette ligne. Après la mise à jour de la version de chrome 50, je reçois ce problème avant que cela fonctionne correctement.

<!DOCTYPE html>
    <html>
    <head> 
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    </head> 
    <body>  
    <script>     
     var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://abcde.com/img/videos/what_is_design_thinking.mp4"; 
     video.volume = .1; 
     video.setAttribute('crossorigin', 'anonymous');    
     video.load(); // must call after setting/changing source   

     $('body').html(video);
     video.play();  

     var canvas = document.createElement('canvas');
     var ctx = canvas.getContext('2d');

     $('body').append(canvas);

     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {
       ctx.drawImage($this, 0, 0);
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);

    </script>
    </body> 
    </html>
javascripthtmlhtml5
19
Vijay Baskaran

Ce problème se produit dans les navigateurs Chrome/Chromium récents à partir de v50.

De HTMLMediaElement.play () Retourne une promesse par Développeurs Google :

La lecture automatique de contenu audio et vidéo sur le Web est une fonctionnalité puissante, soumise à différentes restrictions sur différentes plates-formes. Aujourd'hui, la plupart des navigateurs de bureau permettent toujours aux pages Web de commencer la lecture de <video> ou <audio> via JavaScript sans interaction de l'utilisateur. Cependant, la plupart des navigateurs mobiles nécessitent un geste explicite de la part de l'utilisateur avant que la lecture déclenchée par JavaScript puisse avoir lieu. Cela aide à garantir que les utilisateurs mobiles, dont beaucoup paient la bande passante ou qui se trouvent peut-être dans un environnement public, ne commencent pas accidentellement à télécharger et à lire du contenu multimédia sans interagir explicitement avec la page.

Historiquement, il était difficile de déterminer si l’interaction de l’utilisateur était nécessaire pour démarrer la lecture et de détecter les défaillances survenant lorsqu’une tentative de lecture (automatique) échouait. Plusieurs solutions de contournement existent, mais ne sont pas idéales. Une amélioration de la méthode play() sous-jacente pour remédier à cette incertitude est attendue depuis longtemps. Cela a maintenant été porté à la plate-forme Web, avec une implémentation initiale dans Chrome 50.

Un appel play() sur un élément <video> ou <audio> renvoie désormais une promesse. Si la lecture réussit, la promesse est remplie et si la lecture échoue, la promesse est rejetée avec un message d'erreur expliquant l'échec. Cela vous permet d'écrire du code intuitif comme suit:

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
  playPromise.then(function() {
    // Automatic playback started!
  }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

En plus de détecter si la méthode play () a réussi, la nouvelle interface basée sur Promise vous permet de déterminer quand la méthode play() a réussi. Il existe des contextes dans lesquels un navigateur Web peut décider de différer le début de la lecture. Par exemple, le bureau de Google Chrome ne commence pas la lecture d'un <video> tant que l'onglet n'est pas visible. La promesse ne sera pas remplie tant que la lecture n’aura pas commencé, ce qui signifie que le code contenu dans la then() ne s’exécutera pas tant que le support n’a pas été lu. Les méthodes précédentes permettant de déterminer si play() fonctionnait correctement, telles que l’attente d’un laps de temps défini pour un événement en cours de lecture et la supposition d’un échec s’il ne se déclenche pas, sont susceptibles de générer de faux négatifs dans les scénarios de lecture différée.

Crédits: Impossible de charger car aucune source prise en charge n'a été trouvée. lors de la lecture d'un élément audio HTML5

19
Edward Torvalds

J'ai eu la même erreur et il s'est avéré que c'était un problème de la SCRO.

Au lieu de

video.setAttribute('crossorigin', 'anonymous');

essayez de manière plus explicite:

video.crossOrigin = 'anonymous';

Et assurez-vous que la réponse du serveur a l'en-tête Access-Control-Allow-Origin: *. Ou, au lieu du caractère générique astérisque, spécifiez le domaine du site Web autorisé à accéder à la vidéo à partir du serveur.

1
Michael Franzl

J'ai eu le même problème avec un fichier mp3 ..__ Ma solution était d'ajouter du contenu au code HTML via JavaScript.

Exemple de HTML où je vais mettre le fichier à jouer.

<span id="audio"></span>

Et en javascript:

$('#audio').html('<audio autoplay><source src="audio/Ding.mp3"></audio>');

Cela lira l’audio, en supposant que ce soit la même chose pour la vidéo.

J'espère que ça aide

1
Simon Berton

J'ai eu le même problème, mais la cause était le nom de fichier qui contenait un '#'.

Apparemment, si le nom de fichier contient un '#', j'obtiendrais net::ERR_FILE_NOT_FOUND si le src était défini directement sur la chaîne

document.getElementById('audio').src = '../path/x#y.webm';
console.log(document.getElementById('audio').src); // C:\Users\x\y\z\path\x#y.webm

Mais obtiendrait un DOMException: The element has no supported sources. en utilisant le path.resolve du noeud même si l'attribut src de l'élément html était le même

document.getElementById('audio').src = path.resolve('path', 'x#y.webm');
console.log(document.getElementById('audio').src); // C:\Users\x\y\z\path\x#y.webm

Renommer le nom du fichier en x-y.webm a résolu le problème.

C'était en utilisant electron sur windows, ce n'est peut-être pas le cas sur d'autres OS ou sur des applications web.

0
junvar