Repository navigation
Add Support for Media Queries #737
Description
The native HTML <video> element supports media queries. For example, I can have a dark version of a video if a user prefers dark mode:
<video preload="metadata" controls poster="star-video_poster.jpg">
<source src="star-video_dark.mp4" type="video/mp4" media="(prefers-color-scheme: dark)">
<source src="star-video.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en-us" src="star-video_base.vtt" default>
<a href="star-video.mp4">Download the video</a> or a <a href="star-video_dark.mp4">darker version</a> is available. The <a href="star-video_base.vtt">caption file</a> is also available in case your video player can import it.
</video>
Similarly, a video could honor prefers-reduced-motion to offer a version with less frenetic animation or blinking, or orientation so a user isn't forced to rotate their device, or prefers-reduced-data for a smaller, albeit chunkier, version that won't zero-out their data plan on first view, and so on.
These can be combined, though the permutations add up quickly:
<source src="star-video_motion_dark_portrait.mp4" type="video/mp4" media="(prefers-color-scheme: dark) and (orientation: portrait) and (prefers-reduced-motion: reduce)">
<source src="star-video_portrait_dark.mp4" type="video/mp4" media="(prefers-color-scheme: dark) and (orientation: portrait)">
<source src="star-video_motion.mp4" type="video/mp4" media="(prefers-reduced-motion: reduce)">
<source src="star-video_portrait.mp4" type="video/mp4" media="(orientation: portrait)">
<source src="star-video_dark.mp4" type="video/mp4" media="(prefers-color-scheme: dark)">
<source src="star-video.mp4" type="video/mp4">
I'm suggesting AblePlayer add similar support.
Potentially useful resources:
Activity
joedolson commentedon May 24, 2026
Probably won't happen in version 5, which is going into RC this week, but I'll definitely add this to the 5.1 milestone. Thanks!
aardrian commentedon May 24, 2026
I also said I'd file this in March, so…
Thanks!
Add prototype to filter available sources by media query
joedolson commentedon Jul 7, 2026
I'm thinking about exactly how support should work. The default handling of media queries happens automatically; so if you add sources with media queries, Able Player plays the expected video, if the browser supports that.
By adding some filters to only get sources that match the media query, I can prevent Able Player from trying to handle files that it shouldn't be showing, although I'm not sure how useful that is.
What I can add is some listeners that can switch this dynamically by refreshing the source list, so that if the viewport changes (e.g. orientation changes), I could load the new source, which is something that native players don't do.
But beyond that, I'm unsure exactly what it means to add this support. Adding a media switcher to choose alternate versions is a possibility, though.
Force load matched media queries
joedolson commentedon Sep 18, 2026
Worked this out, and now have an implementation.
joedolson commentedon Sep 18, 2026
Added a listener that handles orientation changes in dc04ecc.
Not going to add one for viewport size changes, as I feel that's rarely a "real world" scenario,