4

I currently provide all images in 4 resolutions (@1x, @2x, @3x and @4x) so that the images are sharply displayed on any display. But now I have the problem that I also have a video on the website and I want to provide the video and its preview image (the so-called poster) in the 4 resolutions as well. The question is how to do it as the video tag does not have its own srcset, neither does the preview image.

I haven't found a built-in way to achieve this yet and I would like to avoid a JS-based solution if possible.

Maybe someone can help with a clever solution.

<video id="mockupVideo" width="100%" height="100%" playsinline preload="auto"
       poster="images/test.jpg">
    <source src="videos/test.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

I have the following image files:

  • images/test.jpg
  • images/test@2x.jpg
  • images/test@3x.jpg
  • images/test@4x.jpg

And these video files:

  • videos/test.mp4
  • videos/test@2x.mp4
  • videos/test@3x.mp4
  • videos/test@4x.mp4

With images I would use the following code:

<img srcset="images/test.jpg,
             images/test@2x.jpg 2x,
             images/test@3x.jpg 3x,
             images/test@4x.jpg 4x"
     src="images/test.jpg">

This is to be achieved in a similar way for the video.

Sam94
  • 135
  • 8

1 Answers1

-1

Looks like you can use media on source elements, like this: https://css-tricks.com/video-source-by-screen-size/, Responsive Html5 Video Resolution

lucifer63
  • 784
  • 9
  • 32
  • This could, however, only help with the video itself but not with the poster. – Sam94 Jul 26 '19 at 13:07
  • @Sam94, as i googled your topic i found out that people had many troubles with poster that is not related to your problem, so (if you want to avoid these troubles) i think the best thing you can do about it is to use a custom element that will mimic the poster (https://stackoverflow.com/questions/10826784). If you insist on using poster, so you can maybe try not defining poster at all in order for browser to display first frame of the video. And since there are no way you can define specific frame as a preview you'll have to set a desired preview as a first frame. This last one sounds maniac – lucifer63 Jul 26 '19 at 13:20
  • As it seems, the media query for video elements was dropped, so this is no longer a working method. – Sam94 Jul 26 '19 at 15:40
  • @Sam94, wow, really? May i plz has souce for this? Anyway, it would be very easy to write a JS fallback – lucifer63 Jul 26 '19 at 21:38
  • It's even stated in your css-tricks article with the following source (http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0350.html) dating from 2012. In the meantime, this seems to have made its way into the browsers. Safari and Chrome on my machine don't bother at least, they always take the same (first) source. – Sam94 Jul 29 '19 at 09:15
  • @Sam94, you are right, https://caniuse.com/#search=media, it can't be used in prod at the moment, alas. Soooo... again: JS fallback would be easy to write) Sry, can't find any suitable solution; waiting for others StackOverflowians to answer – lucifer63 Jul 29 '19 at 12:15