X
Tap here to go to the mobile version of the site.

Support Forum

Brightness and contrast in HTML5 video player?

Posted

Hello Sir or Madam or Mister or Miss, is it possible to add in future version, "brightness" and "contrast" controls for the built-in HTML5 video player? And maybe also add "RGB" Red / Green / Blue controls ? Thanks if you will add these controls for the built-in HTML5 video player.

Hello Sir or Madam or Mister or Miss, is it possible to add in future version, "brightness" and "contrast" controls for the built-in HTML5 video player? And maybe also add "RGB" Red / Green / Blue controls ? Thanks if you will add these controls for the built-in HTML5 video player.

Additional System Details

Installed Plug-ins

  • Shockwave Flash 17.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:38.0) Gecko/20100101 Firefox/38.0

More Information

guigs 1072 solutions 11697 answers

Helpful Reply

HI ffilou6, Using SVG a site developer can style the video this way, however it is not a default feature of the HTML5 player. Please also suggest this in input.mozilla.org to leave feedback for the developers.

HI ffilou6, Using SVG a site developer can style the video this way, however it is not a default feature of the HTML5 player. Please also suggest this in input.mozilla.org to leave feedback for the developers.
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

It may be possible to modify the video using style rules. CSS has a filter property that allows you to reduce brightness and increase/decrease contrast.

There also are saturation and hue-rotation filters, but neither is really a straightforward way to adjust RGB levels. I think someone would need to create an add-on to "do the math" for that.

It may be possible to modify the video using style rules. CSS has a '''filter''' property that allows you to reduce brightness and increase/decrease contrast. * https://developer.mozilla.org/docs/Web/CSS/filter#brightness%28%29 *https://developer.mozilla.org/docs/Web/CSS/filter#contrast%28%29 There also are saturation and hue-rotation filters, but neither is really a straightforward way to adjust RGB levels. I think someone would need to create an add-on to "do the math" for that.
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

Helpful Reply

Fun demo page for CSS filters applied to HTML5 video: http://bennettfeely.com/filters/

Click the "gear" icon at the upper right to open up choices so you can switch from the static image to videos. With more than a dozen video tags, it's a little jerky, but if you can overlook that, very interesting.

Fun demo page for CSS filters applied to HTML5 video: http://bennettfeely.com/filters/ Click the "gear" icon at the upper right to open up choices so you can switch from the static image to videos. With more than a dozen video tags, it's a little jerky, but if you can overlook that, very interesting.

Question owner

@jscher2000: Thanks for the CSS information, I didn't know it was possible to do all this!

I'm a beginner in HTML, CSS and PHP coding. I now know it is possible to use CSS filters on pictures. But I don't even know if it is also possible to use CSS filter on a video?

@jscher2000: Thanks for the CSS information, I didn't know it was possible to do all this! I'm a beginner in HTML, CSS and PHP coding. I now know it is possible to use CSS filters on pictures. But I don't even know if it is also possible to use CSS filter on a video?
jscher2000
  • Top 10 Contributor
8758 solutions 71663 answers

In the demo I linked to, if you right-click a filtered video of the fish tank and Inspect Element (Q), you can see how the filters are applied. Screen shot attached for reference.

In the demo I linked to, if you right-click a filtered video of the fish tank and Inspect Element (Q), you can see how the filters are applied. Screen shot attached for reference.