15

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.

Marek Maurizio
  • 1,073
  • 2
  • 11
  • 22

1 Answers1

12

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.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
  • 4
    Does anyone know if there is more recent information on the `media` attribute? It appears to still work in most browsers, but this answer makes me think I should consider a `javascript` approach instead... – Jason Lydon Sep 25 '14 at 15:21
  • @JasonLydon did you ever find any further info on this? – Djave Nov 28 '16 at 13:19
  • 1
    @Djave When I finally executed the responsive video, I changed the `source` tags using `javascript` based on the `width` of the viewport. – Jason Lydon Dec 02 '16 at 22:49
  • @JasonLydon Is that foolproof since say old Android may only support a lower resolution while small desktop window could still get high quality (esp. if they fullscreen)? – geoboy May 09 '17 at 19:00
  • 3
    `media` is not a valid attribute, when the parent element of `source` is not `picture`. so this might have no fx. same goes for `srcset` and `sizes`. [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source) – honk31 Mar 13 '18 at 14:22
  • It seems that scripting is the only way, which is unfortunate. With modern video compression, videos are often used for decorative purposes similar to how images are used and are not necessarily heavy enough to motivate the use of an adaptive streaming solution. But still, it can make sense to serve a lower-resolution version to smartphone-sized clients, which are also more likely to have slow connections. I found that changing/adding the `src` attribute to an existing `source` tag does not work. The `video` tag should be empty and a `source` added when the desired resolution is known. – Otto G May 15 '23 at 14:38