Comment by chrismorgan | Hacker News Reader

Comment by chrismorgan | Hacker News Reader

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! :-)

> 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.

> 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.

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!

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.

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.

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/issue...

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

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).

> I came up with a technique that makes this work a while back.

It may work, but … ugh. This is a spec issue.

Reply on news.ycombinator.com