wake-up-neo.com

DOMException: Laden fehlgeschlagen, da keine unterstützte Quelle gefunden wurde

Ich bekomme DOMException: Laden fehlgeschlagen, da keine unterstützte Quelle gefunden wurde in video.play (); Linie. Ich erhalte dieses Problem nur, nachdem Sie video.setAttribute ('crossorigin', 'anonymous') hinzugefügt haben. Ich entwickle eine App für Handys. Für Cross Origin muss ich diese Zeile hinzufügen. Nach dem Update von Chrome 50 bekomme ich dieses Problem, bevor es funktioniert.

<!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>
19
Vijay Baskaran

Dieses Problem tritt bei neueren Chrome-/Chromium-Browsern ab Version 50 auf

From HTMLMediaElement.play () Gibt ein Versprechen zurück von Google Developers :

Die automatische Wiedergabe von Audio und Video im Internet ist eine leistungsstarke Funktion, die auf verschiedenen Plattformen unterschiedlichen Einschränkungen unterliegt. In den meisten Desktop-Browsern können Webseiten heutzutage <video> oder <audio> die Wiedergabe über JavaScript ohne Benutzerinteraktion starten. Die meisten mobilen Browser erfordern jedoch eine explizite Benutzergeste, bevor die durch JavaScript initiierte Wiedergabe erfolgen kann. Dadurch wird sichergestellt, dass mobile Benutzer, von denen viele für Bandbreite zahlen oder sich in einer öffentlichen Umgebung befinden, nicht versehentlich beginnen, Medien herunterzuladen und wiederzugeben, ohne explizit mit der Seite zu interagieren.

In der Vergangenheit war es schwierig zu bestimmen, ob eine Benutzerinteraktion erforderlich ist, um die Wiedergabe zu starten und die Fehler zu erkennen, die auftreten, wenn die (automatische) Wiedergabe versucht wird und fehlschlägt. Es gibt verschiedene Problemumgehungen, die jedoch nicht ideal sind. Eine Verbesserung der zugrunde liegenden play() - Methode zur Behebung dieser Unsicherheit ist längst überfällig, und dies hat es nun mit einer ersten Implementierung in Chrome 50 zur Webplattform geschafft.

Ein play()-Aufruf eines <video>- oder <audio>-Elements gibt jetzt ein Promise zurück. Wenn die Wiedergabe erfolgreich ist, wird das Versprechen erfüllt, und falls die Wiedergabe fehlschlägt, wird das Versprechen zusammen mit einer Fehlermeldung zurückgewiesen, die den Fehler erläutert. So können Sie intuitiven Code wie folgt schreiben:

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.
  });
}

Mit der neuen Promise-basierten Schnittstelle können Sie nicht nur feststellen, ob die play () -Methode erfolgreich war, sondern auch, ob die play() -Methode erfolgreich war. Es gibt Kontexte, in denen ein Webbrowser möglicherweise den Start der Wiedergabe verzögern soll. Desktop Chrome beginnt beispielsweise erst mit der Wiedergabe eines <video>, wenn die Registerkarte sichtbar ist. Das Versprechen wird erst erfüllt, wenn die Wiedergabe tatsächlich gestartet wurde. Dies bedeutet, dass der Code in then() erst ausgeführt wird, wenn das Medium abgespielt wird. Frühere Methoden zum Bestimmen, ob play() erfolgreich ist, z. B. das Warten einer bestimmten Zeit auf ein Spielereignis und die Annahme eines Fehlers, wenn es nicht ausgelöst wird, sind in Szenarien mit verzögerter Wiedergabe anfällig für falsche Negative.

Credits: Laden fehlgeschlagen, da keine unterstützte Quelle gefunden wurde. beim Abspielen eines HTML5-Audioelements

19
Edward Torvalds

Ich hatte den gleichen Fehler und es stellte sich als CORS-Problem heraus.

Anstatt

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

versuchen Sie es genauer:

video.crossOrigin = 'anonymous';

Stellen Sie sicher, dass die Serverantwort den Header Access-Control-Allow-Origin: * enthält. Oder geben Sie anstelle des Sternchens Platzhalter die Domäne der Website an, die vom Server aus auf das Video zugreifen darf.

1
Michael Franzl

Ich hatte das gleiche Problem mit einer MP3-Datei ... __ Meine Lösung bestand darin, der HTML-Datei durch Javascript Inhalt hinzuzufügen.

Beispiel für HTML, wo die Datei abgespielt werden soll.

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

Und in Javascript:

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

Dadurch wird das Audio abgespielt, vorausgesetzt es ist das gleiche für Video.

Ich hoffe es hilft

1
Simon Berton

Ich hatte das gleiche Problem, aber die Ursache war, dass der Dateiname ein '#' enthielt.

Wenn der Dateiname ein '#' enthält, würde ich net::ERR_FILE_NOT_FOUND bekommen, wenn man src direkt auf den String setzt

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

Würde aber einen DOMException: The element has no supported sources. erhalten, wenn path.resolve des Knotens verwendet wird, obwohl das src-Attribut des html-Elements dasselbe wäre

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

Durch Umbenennen des Dateinamens in x-y.webm wurde das Problem behoben.

Dies wurde unter Windows mit Elektron ausgeführt. Dies kann bei anderen Betriebssystemen oder Web-Apps nicht der Fall sein.

0
junvar