5

I started working with HTML5 Canvas and Video and I keep having this problem: I try demos and experiments but I can't view them unless I upload them to my web server. At the moment this doesn't pose a huge problem because I'm working with comparatively small files, but I'm actually preparing a bigger project, and this problem would become quite inconvenient very quickly. And also I would just like to get my facts straight. I have been working with both, my own created videos and those from demos. I worked with videos I encoded ages ago and I worked with videos I encoded a minute before using them in my code. It's always the same result, using the HTML5 Video container works, using video inside Canvas doesn't, Canvas just doesn't display any video (unless, like I mentioned, I upload them to a server).

This is the information I found so far:

http://html5doctor.com/video-canvas-magic/

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#security-with-canvas-elements

(and a little bit of information on w3, but I'm not allowed to post more than two links)

From what I understand, my canvas must be tainted and my files don't appear to be 'origin-clean', but this is all I have been able to figure out. I don't understand why.

Does anybody know more about this and can explain how and why this works?

chuls
  • 217
  • 1
  • 5
  • 9

1 Answers1

2

There's a strict separation within browsers between anything loaded from http:// and anything loaded from a file:// URI. This is actually pretty sensible, otherwise random pages you loaded from the web would be able read files off your harddrive. There are several additional restrictions that apply to file:// URIs themselves, again these are aimed at not letting files you've downloaded from the web having free run of your harddrive.

Having said all that, if your HTML file and the videos are all sitting in the same directory on your harddrive then everything should still work as all these conditions should be met.

If you're still having problems, one useful approach for local development is to use a lightweight web server. Personally I use Python's SimpleHTTPServer because it was already installed on my machine, but there are many others - often web development frameworks (eg. Ruby on Rails) come with them built in.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • Thanks. I created several demos in the last 1-2 months and the interesting thing is, that some video demos work without uploading and some don't. Most of the time I'm using the same videos, sometimes freshly converted to a different format and sometimes old ones. I still can't figure out when my browsers accept them and why at times they don't. But I'll follow your advice if my final project's having this problem. – chuls Apr 19 '11 at 03:29
  • For file:// URLs the origin is considered different always unless the path is the same. Even if everything is local in the same directory. – Brian R. Bondy Jul 12 '11 at 14:02
  • "For file:// URLs the origin is considered different always unless the path is the same." That's not correct. The actual rule differs between browsers and versions of browsers; see https://developer.mozilla.org/En/Same-origin_policy_for_file%3a_URIs for recent versions of Firefox, for example. – Daira Hopwood Jul 30 '11 at 22:27