• Register
0 votes
2.4k views

Problem :

I am facing following error message:

DOMException: Failed to load because no supported source was found in video.play(); line.

I have started getting this issue only after adding following code:

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

I am trying to develop an app in the mobile so for the cross origin I must add this line. Also note that I am getting this issue only after the updating my chrome to 50 version before that it was working 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>

6 5 3
7,540 points

Please log in or register to answer this question.

1 Answer

0 votes

Solution :

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

So instead of below code:

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

Try the below correct code:

video.crossOrigin = 'anonymous';

And also please make sure that the server response must have the header as Access-Control-Allow-Origin:*. Instead of the asterisk wild card, you can specify the domain of the website that is allowed to access your video from the server.

9 7 4
38,600 points

Related questions

0 votes
1 answer 13 views
13 views
Problem : Any help, I am facing following error: Uncaught (in promise) domexception: failed to load because no supported source was found.
asked Mar 13 Wafa Abu Yousef 6.1k points
0 votes
1 answer 8 views
8 views
Problem: can anybody help me understanding this error : uncaught error: bootstrap's javascript requires jquery at bootstrap.min.js:6.
asked Mar 6 Wafa Abu Yousef 6.1k points
0 votes
1 answer 2.9K views
2.9K views
Problem : I am trying to execute bootstrap jquery code but getting below error uncaught error: bootstrap's javascript requires jquery at bootstrap.min.js:6
asked Oct 22, 2019 peterlaw 6.9k points
1 vote
1 answer 979 views
979 views
Problem : Trying to drag and drop an image on a div. but the image does not get dragged on to the div and gives the following error: uncaught typeerror: failed to execute 'appendchild' on 'node': parameter 1 is not of type 'node'.
asked Nov 11, 2019 peterlaw 6.9k points
0 votes
1 answer 6 views
6 views
Problem: Any help with this issue: how to link js file to html
asked Mar 19 Wafa Abu Yousef 6.1k points
0 votes
2 answers 36 views
36 views
Problem I am a bit confused what is a right way to link/include JavaScript file in HTML ? And hoe to do it right ?
asked Oct 17, 2020 alexh 2.6k points
1 vote
1 answer 91 views
91 views
How do I modify the URL without reloading the page?
asked Sep 28, 2020 Xaimax 9.5k points
0 votes
1 answer 522 views
522 views
Problem : I am unable to solve my link problem. Can anybody help on to this to link the CSS and JS File? I am facing below error : Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/ ... .js Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/RetailSmart/jsp/Jquery/prettify.js
asked Jan 10, 2020 alecxe 7.5k points
0 votes
1 answer 177 views
177 views
Problem : I have the javascript application and when I try to run it on firefox I am facing the below error on the console: &ldquo;Because its mime type ('text/html') is not a supported stylesheet mime type&rdquo; Now I am completely confused because of this error. Kindly somebody let me know how can I resolve my above error?
asked Jan 29, 2020 jwilliam 3.9k points
0 votes
1 answer 27 views
27 views
Problem: I don&rsquo;t know how to open web browser in python, instead of research it would be great if someone could help me out. Thanks in advance.
asked Dec 25, 2020 sasha 16.2k points