title: Does Video.js support the media attribute to change the source according to the media query?
body: <p>I'm using video.js to serve html5 video in responsive layouts (using <a href="http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/" rel="nofollow">Dave Rupert's tweak</a> to alter the width and height to fit the container).
  I'm now working on a site that will need to serve larger video where appropriate, and I'd like to use the media attribute to serve a different source video.
  I could use javascript to change the source, but I'd like to be able to use the media query if possible, so that if JS is disabled, then a suitable video will still get served.</p>
  
  <p>I've set up my code as follows:</p>
  
  <pre><code>&lt;video id="lightTouchVideo" class="video-js vjs-default-skin" controls preload="none" poster="/Content/images/video-posters/light-touch.jpg" data-setup="{}"&gt;
  &lt;source src="/Content/video/light-touch-240p.mp4" type='video/mp4'&gt;
  &lt;source src="/Content/video/light-touch-240p.webm" type='video/webm'&gt;
  &lt;source src="/Content/video/light-touch-240p.ogv" type='video/ogv'&gt;
  &lt;source src="/Content/video/light-touch-360p.mp4" type='video/mp4' media="all and (min-width:599px)"&gt;
  &lt;source src="/Content/video/light-touch-360p.webm" type='video/webm' media="all and (min-width:599px)"&gt;
  &lt;source src="/Content/video/light-touch-360p.ogv" type='video/ogv' media="all and (min-width:599px)"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>I've tried using very obviously different videos for the two sources, and I just get whichever is listed in the source first. I've tried in the latest Firefox, Chrome and IE, so I don't think it's that the browser doesn't support the video media attribute (although it was rumoured to be considered for removal from the spec).</p>
  
  <p>So, does video.js support the media attribute?</p>