Pseudo elements for <video> content and controls

[jakearchibald]

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 content
• video::media-controls - the controls

::cue already exists for text tracks.

::-webkit-media-controls is already a thing.

Anything else?

No response

[jakearchibald]

Couple of StackOverflow posts wanting this:

• https://stackoverflow.com/questions/46448664/how-to-apply-css-filter-to-video-without-affecting-controls-in-html5
• https://stackoverflow.com/questions/26892190/css-filter-video-but-not-the-controls

[ydaniv]

+1! Same goes for clipping and masking the content.

[jakearchibald]

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.

[lukewarlow]

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.

[annevk]

cc @whatwg/media @whatwg/css