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:
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:Similarly, a video could honor
prefers-reduced-motionto offer a version with less frenetic animation or blinking, ororientationso a user isn't forced to rotate their device, orprefers-reduced-datafor 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:
I'm suggesting AblePlayer add similar support.
Potentially useful resources: