Responsive Html5 Video Resolution

Question

I'm writing a simple web page using responsive web design, so CSS3 media queries to serve different stylesheets based on screen resolution. To keep it simple, let's say there is an iphone versione and a desktop version. I'm using the html5 video tag to serve videos, and i would like to serve a 720p video when the site is accessed with a desktop and a smaller, 320p video when accessed with an iphone. Am i wrong or there is no easy way to do it just with html/css? Do i have to use javascript to dynamically change the video src attribute? If so, what are the best practices? Thanks in advance.

Answer 1

You can add the media attribute to the various source elements allowing you to serve up different videos for devices which match media query settings (as linked to by DBUK above).

For example:

<video controls>
   <source src="mySmallVideo.webm" type="video/webm" media="all and (max-width:600px)">
   <source src="myVideo.webm" type="video/webm">
</video>

Update – 24.07.2012 It's likely that this will be removed from the specification.