Open jakearchibald opened 1 month ago
+1! Same goes for clipping and masking the content.
A fun hack is to do something like:
video {
overflow: visible;
translate: -2000px 0;
&::-webkit-media-controls {
translate: 2000px 0;
}
}
That gives you the controls without the video. You still need to draw the video to a canvas before you can filter it. And this hack doesn't work in Firefox.
It's worth also noting that as part of the invokers/commands proposal a number of people are keen on the idea of commands for controlling media elements and this is in part because styling the built-ins is hard/impossible, any step in the right direction would be good.
cc @whatwg/media @whatwg/css
What problem are you trying to solve?
I want to apply CSS filters/adjustments to
<video>
content without impacting the visual appearance of controls & subtitles.In another use-case, I want to
display: none
the video content, as I'm writing to it a<canvas>
with post-processing, but I'd still like to overlay the browser playback controls.What solutions exist today?
You can recreate the controls and video controls yourself, then apply CSS filters etc to the
<video>
.How would you solve it?
Give
<video>
pseudo-elements such as:video::media-content
- the poster and frame contentvideo::media-controls
- the controls::cue
already exists for text tracks.::-webkit-media-controls
is already a thing.Anything else?
No response