CODEWITHSUNDEEP
google-chromefirefoxsafariffmpeghtml5-video
James
James

Reputation: 18379

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

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?

Upvotes: 13

Views: 9475

Answers (4)

realmuster
realmuster

Reputation: 156

As the brightness-workaround made everything brighter than white (yeah right) in iOS, i had to find another workaround.

The (better) workaround is to set a border-radius for 0.000001% or bigger. Then it does not show white as gray anymore.

<video autoplay loop playsinline muted style="border-radius:0.000001%;">
    <source src="whatever.mp4" type="video/mp4">
</video>

Hope it helps, cheers

Upvotes: 0

Niente0
Niente0

Reputation: 51

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

Upvotes: 5

intika
intika

Reputation: 9772

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 :

https://i.sstatic.net/tWWqm.jpg

Upvotes: 15

iCrazybest
iCrazybest

Reputation: 3115

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.

Upvotes: -2

Related Questions