• Register
search
Log In
0 votes
587 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>

7.5k 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.

36.1k points

Related questions

0 votes
1 answer 1.3K views
1.3K 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
0 votes
1 answer 118 views
118 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
1 vote
1 answer 194 views
194 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 46 views
46 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 jwilliam 3.9k points
0 votes
1 answer 400 views
400 views
Problem : I want to drag and drop the image on the div. The image does not get dragged onto a div and gives the below error : Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop
asked Jan 18 jwilliam 3.9k points