So I have some video files on Rackspace Cloud Files but since I use HTML5 functions (.toDataURL()) "SECURITY_ERR: DOM Exception 18" keeps getting thrown. My code works fine when I use a video file on my server.
So I read up about CORS and modified my Rackspace Cloud Files headers like this:
access-control-allow-credentials: true
access-control-allow-origin: [my domain here]
access-control-allow-headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control
access-control-allow-methods: OPTIONS, GET, POST
access-control-expose-headers: X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name
Content-Type: video/webm
But the DOM Exception 18 error keeps getting thrown. I don't know what the problem is. I checked to see if the HTTP headers were being outputted by my video files on Rackspace with web-sniffer.net and they are, so what's the problem, why doesn't it work?
I have tried it on IE9, Chrome 19, Safari 5.1.2, and Aurora 12.0a2, they don't work on any of those browsers so I'm certain that this is not a browser issue.
I just have to get rid of this DOM Exception 18 error.
toDataURL() will not work if your content is on a CDN (or any other host than the current) that's a security restriction of the CANVAS element.
compare http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements for details on what's prohibited
basically whenever you want to do something with images or videos within a canvas and save the result you will have to have all prior content on the same domain. one workaround would be to grab the required files and save them temporarily while the user edits it