Firefox, Chrome, Safari have grey background for M

Question

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/tablet and Mac it is white...

I am using ffmpeg to encode the video. If I encode it as webm, the background is white.

See: https://jsfiddle.net/Lbg8f6ck/

I found a hack that fixes it for Chrome:

<video style="-webkit-filter:brightness(108.5%);"

But it does not work for Firefox or Safari.

Another hack for Firefox:

filter:brightness(1.085)

But for some reason setting it through JavaScript does not work.

A few versions ago the background was white for Chrome, then became grey again...

The question is: Why is white grey?

Is it an issue with the video or with Chrome, Firefox, Safari in general? (How can they not support white?)

Is it possible to get a white background?

Any hacks, workarounds?

Answer 1

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.

Answer 2

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

<div class="brightness">
<video src="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+ */
}

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

---

Problem Demonstration

<div class="brightness">
<video src="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

Answer 3

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

1. open the NVIDIA Control Panel
2. under "Video" select “Adjust video color settings”
3. under "How do you make color adjustments" select “With the NVIDIA settings”
4. 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