• Register
0 votes
1.2k 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

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 1.9K views
1.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 319 views
319 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 254 views
254 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 alecxe 7.5k points
0 votes
2 answers 17 views
17 views
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 alexh 480 points
1 vote
1 answer 11 views
11 views
How do I modify the URL without reloading the page?
asked Sep 28 Xaimax 9.5k points