The <video> poster attribute should accept multiple sources

[benwiley4000]

It's a shame we can't currently specify multiple poster image sources for a video element to be used depending on pixel density and size of the video element.

I'd propose that there be a posterset attribute similar to img srcset, if expanding the poster attribute's inputs seems unwise.

[benwiley4000]

cc @tabatkins re: srcset

[tabatkins]

Yeah, I'm def down with the concept. Question is just if we think there's a necessity for full art-direction (multiple source elements) or if it's fine to just provide different-density variants of the same image. I suspect the latter.

[benwiley4000]

I think I agree, although I want to make sure your suggestion accounts for variants based on size, not just density. Basically whatever the img srcset attribute supports.

[tabatkins]

srcset only allows varying on density. You can specify the density indirectly (via sizes and w), but all the variants are still required to be the exact same image, just at different densities.

If you want to change the size/aspect-ratio of the image, that's what you need multiple sources for in picture; that's less compatible with video, as it's already using source for something else. ^_^

[benwiley4000]

@tabatkins oh got it.

I agree there's no compelling reason to support multiple aspect ratios/multiple source elements.

Regarding size, I guess what I was looking for was a way to select the correct image url based on the w in srcset and the computed size of the video, without adding the sizes attribute - although maybe sizes would be required for that.

[johannesodland]

Yeah, I'm def down with the concept. Question is just if we think there's a necessity for full art-direction (multiple source elements) or if it's fine to just provide different-density variants of the same image. I suspect the latter.

The media attribute was reintroduced to media element sources yesterday. Once that is implemented in browsers the video element will support art-directions with multiple source elements with media attributes.

As a result I think that there's a need for full art-direction of the poster image as well.

[prlbr]

Yeah, I'm def down with the concept. Question is just if we think there's a necessity for full art-direction (multiple source elements) or if it's fine to just provide different-density variants of the same image. I suspect the latter.

I stumbled into this issue when I looked for how to provide different file type versions of the same poster image – for example JXL + traditional JPEG as fallback. This is possible for <img> with the help of <picture> and <source>. It would be nice to be able to do this for <video> poster images as well so that more efficient or better quality images can be used in supporting browsers without making the poster image break in legacy/non-supporting browsers.

[aarontgrogg]

Could it also make sense for source elements within a video element to get their own poster attribute?

This would be especially helpful when one source is portrait-oriented (maybe for "mobile") and another is landscape-oriented (for "desktop"), and those controlled by individual media attributes....

So you could have something like:

<video>
  <source src="/mobile-video.mp4" poster="/mobile-image.jpg" width="300" height="400" media="(max-width: 1023px)">
  <source src="/desktop-video.mp4" poster="/desktop-image.jpg" width="400" height="300" media="(min-width: 1024px)">
</video>

[ryanfb]

@aarontgrogg I think a similar, but different, approach was just proposed in #10378

[aarontgrogg]

@ryanfb Yes, was speaking with @scottjehl about this. I am not a fan of how verbose that would make that block of code, but I do see the logic of it. I also am not a fan of how much code would need to be replicated, and perfectly paired, between the video > source and the picture > source... I can also understand why browsers might not want to have to "recreate the wheel" (adding new attributes that already exist on other elements) when existing functionality could do the job... But, my preference remains expanding the video > source elements. I feel it is much more succinct and clear.