I'd like to provide a low-res and a high-res version of a video, the latter one is intended for retina displays. This video should be embedded in a html5 page. In particular this will be an iPad web app.
Is there an easy way to let the browser engine choose the correct one (e.g. from multiple <source> tags) or do I have to do some JS-foo? I did find a lot of solutions for <img>, <canvas> and CSS handling, but no best practice for videos.
Well you could try and use the media attribute on source elements.
A code example is given below:
<video controls>
<source src="video-small.mp4" type="video/mp4" media="all and (max-width:480px)">
<source src="video-small.webm" type="video/webm" media="all and (max-width:480px)">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
The issue is finding a media query that would help indicate that the display is retina.
EDIT I tested this a bit more, and it turns out that you also need to set a media query on the other sources as they seem to take priority. I wrote a bit about it at: HTML5 video for retina displays.