Firefox, Chrome, Safari have grey background for MP4 HTML5 video

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

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