4 ms·

My reason for desiring the media attribute on video sources is so you can use different videos in dark mode and light mode, with no JavaScript required, which I

My reason for desiring the media attribute on video sources is so you can use different videos in dark mode and light mode, with no JavaScript required, which I have definitely done with image sources. (No public examples, sorry; but it’s stuff like including a screenshot of a third-party web app which has its own light and dark modes, so I take a screenshot of each and have it choose the appropriate one.) For that matter, I want audio sources to support media queries, so that you can present dark and ominous music in dark mode and light and bouncy music in light mode if you really want to, but mostly just so that <source>’s properties are consistent regardless of the parent element. As for making poster support multiple sources, I came up with a technique that makes this work a while back. I should finish that pair of blog posts off. Short version: poster="data:image/svg+xml,<svg><foreignObject><picture><source …/>…</picture></foreignObject></svg>". Yep. Seriously! :-)

account42 5y ago
A simpler method is to have a transparent poster and then have a <picture> behind the <video>.
- chrismorgan 5y ago
  Problems with that: full screen the video and the poster disappears; if the video aspect ratio differs from the poster, or the video has an alpha channel, the poster will be visible underneath; browsers could change their video poster styles so that this would look different or even not work (though at least in Firefox and Chromium they do look the same at present).
xyzzy_plugh 5y ago
> For that matter, I want audio sources to support media queries, so that you can present dark and ominous music in dark mode and Okay I feel like this computer/internet thing has been a grave error, maybe it's time to pack it in and start over.
d2wa 5y ago
> I came up with a technique that makes this work a while back. It may work, but … ugh. This is a spec issue.
d2wa 5y ago
> I want audio sources to support media queries, so that you can present dark and ominous music in dark mode and light and bouncy music in light mode You’ll love what they’ve done in Windows 11.
- chrismorgan 5y ago
  Huh, I’ve been waiting for years for someone to do something like that. Even if they’ve gone for softer/“calmer” sounds (effectively reducing the contrast) rather than dark and ominous!
phillipseamore 5y ago
You don't need media support in video for prefers-color-scheme. Just include both dark/light versions of the videos and hide/show from CSS.
- chrismorgan 5y ago
  Much the same is true of picture sources (though I’d guess—without having checked—that browsers are more likely to start downloading images before realising they are display:none than they are videos). The theory behind <source> is that all of the offered sources are equivalent in some way, which for audio and video would strongly imply temporal equivalence, meaning that if the media query match changes, it should swap the source and continue where you’re up to. This, incidentally, is where DASH/HLS would be really helpful, to make it easier to transition from one source to another with no pause. Whereas if you do two videos and hide the one that doesn’t match, and you have a computer that switches to dark mode at sunset or based on ambient light, your video is going to stop playing and you’ll lose your place as soon as it switches from dark to light or light to dark.
  - phillipseamore 5y ago
    And that's precisely the reason it was removed from the specs. There are so many moving things that need to be done right and in the end it all hinges on the media authoring being done right (which is why the HLS/DASH specs are valuable). I went over some of these things a few months ago: https://github.com/filamentgroup/html-video-responsive/issues https://github.com/filamentgroup/html-video-responsive/issue...

account42 5y ago

A simpler method is to have a transparent poster and then have a <picture> behind the <video>.

chrismorgan 5y ago
Problems with that: full screen the video and the poster disappears; if the video aspect ratio differs from the poster, or the video has an alpha channel, the poster will be visible underneath; browsers could change their video poster styles so that this would look different or even not work (though at least in Firefox and Chromium they do look the same at present).

xyzzy_plugh 5y ago

> For that matter, I want audio sources to support media queries, so that you can present dark and ominous music in dark mode and Okay I feel like this computer/internet thing has been a grave error, maybe it's time to pack it in and start over.

d2wa 5y ago

> I came up with a technique that makes this work a while back. It may work, but … ugh. This is a spec issue.

d2wa 5y ago

> I want audio sources to support media queries, so that you can present dark and ominous music in dark mode and light and bouncy music in light mode You’ll love what they’ve done in Windows 11.

chrismorgan 5y ago
Huh, I’ve been waiting for years for someone to do something like that. Even if they’ve gone for softer/“calmer” sounds (effectively reducing the contrast) rather than dark and ominous!

phillipseamore 5y ago

You don't need media support in video for prefers-color-scheme. Just include both dark/light versions of the videos and hide/show from CSS.

chrismorgan 5y ago
Much the same is true of picture sources (though I’d guess—without having checked—that browsers are more likely to start downloading images before realising they are display:none than they are videos). The theory behind <source> is that all of the offered sources are equivalent in some way, which for audio and video would strongly imply temporal equivalence, meaning that if the media query match changes, it should swap the source and continue where you’re up to. This, incidentally, is where DASH/HLS would be really helpful, to make it easier to transition from one source to another with no pause. Whereas if you do two videos and hide the one that doesn’t match, and you have a computer that switches to dark mode at sunset or based on ambient light, your video is going to stop playing and you’ll lose your place as soon as it switches from dark to light or light to dark.
- phillipseamore 5y ago
  And that's precisely the reason it was removed from the specs. There are so many moving things that need to be done right and in the end it all hinges on the media authoring being done right (which is why the HLS/DASH specs are valuable). I went over some of these things a few months ago: https://github.com/filamentgroup/html-video-responsive/issues https://github.com/filamentgroup/html-video-responsive/issue...