Menu
I'm getting DOMException: Failed to load because no supported source was found in video.play(); line. I'm getting this issue only after adding video.setAttribute('crossorigin', 'anonymous'); I'm developing app in mobile so for cross origin i need to add this line. After update of chrome 50 version i'm getting this issue before that it works fine.
<!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> 
421
Browsers like Chrome throws uncaught (in promise) domexception: failed to load because no supported source was found when it is not able to load audio files from url. This sometimes happen due to unable to load inline audio files.
The DOMException interface represents an abnormal event (called an exception) that occurs as a result of calling a method or accessing a property of a web API.
This problem occurs in newer Chrome/Chromium browsers starting from v50
Automatically playing audio and video on the web is a powerful capability, and one that’s subject to different restrictions on different platforms. Today, most desktop browsers will always allow web pages to begin
<video>or<audio>playback via JavaScript without user interaction. Most mobile browsers, however, require an explicit user gesture before JavaScript-initiated playback can occur. This helps ensure that mobile users, many of whom pay for bandwidth or who might be in a public environment, don’t accidentally start downloading and playing media without explicitly interacting with the page.It’s historically been difficult to determine whether user interaction is required to start playback, and to detect the failures that happen when (automatic) playback is attempted and fails. Various workarounds exist, but are less than ideal. An improvement to the underlying
play()method to address this uncertainty is long overdue, and this has now made it to the web platform, with an initial implementation in Chrome 50.A
play()call on an a<video>or<audio>element now returns a Promise. If playback succeeds, the Promise is fulfilled, and if playback fails, the Promise is rejected along with an error message explaining the failure. This lets you write intuitive code like the following: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. }); }In addition to detecting whether the play() method was successful, the new Promise-based interface allows you to determine when the
play()method succeeded. There are contexts in which a web browser may decide to delay the start of playback—for instance, desktop Chrome will not begin playback of a<video>until the tab is visible. The Promise won’t fulfill until playback has actually started, meaning the code inside thethen()will not execute until the media is playing. Previous methods of determining ifplay()is successful, such as waiting a set amount of time for a playing event and assuming failure if it doesn’t fire, are susceptible to false negatives in delayed-playback scenarios.
Credits: Failed to load because no supported source was found. when playing HTML5 audio element
145
I've had the same issue in VueJS. The thing that worked for me was to replace:
const audio = new Audio(required('../assets/sound.mp3')) audio.play() with:
import sound from '../assets/sound.mp3' const audio = new Audio(sound) audio.play() If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
