Responsive videos made easy19 Jun 2014
Github is definitely a nice place to be around. Following people leads to lucky discoveries.
This morning, Paul Adenot, software engineer at Mozilla, and specialised in audio and video, published a new repo with the content of his talk about rich audio and video on the web.
The talk can be accessed at this address, and it's a short delight.
Basically, CSS media queries now work on the
Without going through the codecs question (addressed earlier in the talk), you can add a media property to your HTML5 videos, like that:
<video controls> <source src="retina.webm" media="(min-resolution: 300dpi)"></source> <source src="desktop.webm" media="(min-device-width: 769px)"></source> <source src="mobile.webm" media="(max-device-width: 769px)"></source> </video>
Jump to the slide to see a demo, that is quite impressive.
That is not a revolution - and it's already a 2-year-old solution, but it is progress in terms of usability, simplicity, and weight.
(Provided you use Firefox, for Chrome doesn't integrate this functionality yet.)