Firefox，Chrome，Safari对MP4 HTML5视频有灰色背景 [英] Firefox, Chrome, Safari have grey background for MP4 HTML5 video

问题描述

任何带有白色背景的视频（我可以制作）在Firefox，Chrome和Safari中都变成灰色（在IE中是白色的）。那么，在我的Windows机器上，它是灰色的，在我的Android手机/平板电脑和Mac上它是白色的...

我使用ffmpeg编码视频。如果我把它编码为webm，背景是白色的。

请参阅 https://jsfiddle.net/Lbg8f6ck/

我发现了一个可以修复Chrome的黑客攻击：

 < video style = -  webkit-filter：brightness（108.5％）; 
  

但是它不适用于Firefox或Safari。

$ p
$ b

  filter：brightness（1.085）
  
 
 
 
但是由于某种原因，通过JavaScript设置是行不通的。
 
 
背景是白色的铬，然后变成灰色了... 
 
 
 
问题是：为什么是白色的灰色？
 
 
这是视频问题还是与Chrome，Firefox，Safari一般？ （他们怎么能不支持白色？）
 
 
是否有可能获得白色背景？
 
 
任何黑客，解决方法？
 
解决方案
 
经过漫长的搜索和测试，这里是一个可行的解决方案
 
 
  解决方案：  
 
 
 
  CSS  b 
 
  .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/  
 
 
 
 
 
 
  解决方案演示 em>  
 
 
 
 
 
 
  .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 =亮度>< video src =http://www.botlibre.com/media/a786628.mp4>< / video>< / div>

$ b

问题演示

< pre class =snippet-code-html lang-html prettyprint-override> < div class =brightness>< video src =http://www.botlibre.com/media

b

---

替代解决方法： 尝试使用其他html视频播放器
http://html5video.org/wiki/HTML5_Video_Player_Comparison

你可以改变你的页面背景为灰色的Firefox等，以配合你的v ideo

另外，如果只是女性说话，您可以使用GIF动画与音频

Capture Firefox：

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

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?

解决方案

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

这篇关于Firefox，Chrome，Safari对MP4 HTML5视频有灰色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！