Question

[Solved] DOMException: Failed to load because no supported source was found

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>

Solution #1:

This problem occurs in newer Chrome/Chromium browsers starting from v50

From HTMLMediaElement.play() Returns a Promise by Google Developers:

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 the then() will not execute until the media is playing. Previous methods of determining if play() 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

Respondent: Edward Torvalds

Solution #2:

I had the same error and it turned out to be a CORS issue.

Instead of

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

try the more explicit way:

video.crossOrigin = 'anonymous';

And make sure that the server response has the header Access-Control-Allow-Origin: *. Or instead of the asterisk wildcard, specify the domain of the website that is allowed to access the video from the server.

Respondent: Michael Franzl

Solution #3:

I had the same problem with an mp3 file.
My solution was to add content to the html through javascript.

Example of HTML where i’m going to put the file to be played.

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

And in javascript:

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

This will play the audio, assuming its the same for video.

Hope it helps

Respondent: Simon Berton

Solution #4:

I had the same problem, but the cause was the file name contained a ‘#’.

Apparently, if the file name contains a ‘#’ I would get net::ERR_FILE_NOT_FOUND if setting the src directly to the string

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

But would get a DOMException: The element has no supported sources. when using node’s path.resolve even though the html element’s src attribute would be the same

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

Renaming the file name to x-y.webm resolved the issue.

This was using electron on windows, it may not be the case on other os’s or on web apps.

Respondent: junvar

Solution #5:

If you are having this error and none of the answers above apply ” DOMException: Failed to load because no supported source was found ” could mean you opened your code without opening the file containing the audio or video file you wish to play

Respondent: JamesChaves

Solution #6:

This same error can crop up if you are serving your app/site from localhost (eg during development) with http, and have the files stored in a Cache that you are using match() to determine if the file is in the Cache (or not). In my case, I had to add an option to set ‘ignoreVary’ to true on the call to match(), either on the call you make explicitly:

await myCache.match(filename, {ignoreVary: true}) // ignoreVary for localhost

or if using workbox in a service worker:

workbox.strategies.cacheOnly({
  cacheName: myCacheName,
  matchOptions: {
    ignoreVary: true, // <- this is the important bit
  },
  plugins: [
    /* bla bla */
  ]
})

Refs:
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage/match
https://github.com/GoogleChrome/workbox/issues/1550

Respondent: Max Waterman

Solution #7:

  <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>append demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>I would like to say: </p>

<script>
 var video = document.createElement( 'video' ); 

     video.id = 'video';    
     video.type = ' video/mp4; codecs="theora, vorbis" ';   
     video.src = "http://www.w3schools.com/html/mov_bbb.mp4"; 

    // $('body').html(video);
     video.play();  
     video.addEventListener('play', function() {
       var $this = this; //cache
       (function loop() {
       if (!$this.paused && !$this.ended) {      
       setTimeout(loop, 1000 / 30); // drawing at 30fps
       }
       })();
      }, 0);
$( "p" ).append( video );
</script>

</body>
</html>
Respondent: Gayathri Mohan

Solution #8:

I had this problem in a NodeJS / Electron app. It turned out to be the path to the audio file was wrong.

Respondent: kurtk

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy