Firefox, Chrome, Safari Have Grey Background For Mp4 Html5 Video

October 08, 2023 Post a Comment

Any video (that I can make) with a white background becomes grey in Firefox, Chrome, and Safari (it is white in IE). Well, on my Windows machine it is grey, on my Android phone/tab

Solution 1:

After a long search and tests here is a working solution

Solution :

CSS

.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */-webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

HTML

<divclass="brightness"><videosrc="http://www.botlibre.com/media/a786628.mp4"></video></div>

https://jsfiddle.net/27L5nvg4/1/

Solution Demonstration

.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

<divclass="brightness"><videosrc="http://www.botlibre.com/media/a786628.mp4"></video></div>

Problem Demonstration

<divclass="brightness"><videosrc="http://www.botlibre.com/media/a786628.mp4"></video></div>

Alternative Workarounds :

Try using an other html video player http://html5video.org/wiki/HTML5_Video_Player_Comparison

You can change you page background to gray for firefox etc. to match your video

Also if it's just the women talking you can use gif animation with audio

Capture Firefox :

http://i.stack.imgur.com/tWWqm.jpg

Solution 2:

In many cases it is a problem of nVidia drivers. NVIDIA video card users try the following:

open the NVIDIA Control Panel
under "Video" select “Adjust video color settings”
under "How do you make color adjustments" select “With the NVIDIA settings”
under "Advanced" make sure "Dynamic Range" is “Full (0-255)” not “Limited (16-235)” (“Dynamic contrast enhancement” should be unchecked)

In my case it worked, anyway I don't understand why Dynamic range for video is limited by default...

See here: https://bugzilla.mozilla.org/show_bug.cgi?id=1138024

Solution 3:

Chrome will default to a different video encoding using an open source HTML5 video codec. The other browsers such as FireFox, Safari and IE will default to using Flash.

Html5 Info