Firefox,Chrome,Safari具有MP4 HTML5视频的灰色背景

Question

在Firefox,Chrome和Safari中,任何带有白色背景的视频(我可以制作)都会变成灰色(IE中为白色).好吧,在我的Windows机器上它是灰色的,在我的Android手机/平板电脑和Mac上是白色的...

我正在使用ffmpeg对视频进行编码.如果我将其编码为webm,则背景为白色.

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

我找到了修复Chrome的黑客攻击:

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

但它不适用于Firefox或Safari.

Firefox的另一个黑客攻击:

filter:brightness(1.085)

但由于某些原因,通过JavaScript设置它不起作用.

在几个版本之前,Chrome的背景为白色,然后再次变为灰色......

问题是:为什么是白色灰色？

是视频还是Chrome,Firefox,Safari的问题？(他们怎么能不支持白色？)

是否有可能获得白色背景？

任何黑客,解决方法？

Answer 1

经过长时间的搜索和测试,这是一个有效的解决方案

方案:

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/

解决方案演示

.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>

问题演示

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

替代解决方案:

尝试使用其他html视频播放器 http://html5video.org/wiki/HTML5_Video_Player_Comparison

您可以将页面背景更改为灰色等firefox等以匹配您的视频

此外,如果只是女性说话,你可以使用带音频的gif动画

捕获Firefox:

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

Answer 2

在许多情况下,这是nVidia驱动程序的问题.NVIDIA显卡用户尝试以下操作:

1. 打开NVIDIA控制面板
2. 在"视频"下选择"调整视频颜色设置"
3. 在"如何进行颜色调整"下选择"使用NVIDIA设置"
4. 在"高级"下,确保"动态范围"为" 完全(0-255) "而不是"限制(16-235)"(应取消选中"动态对比度增强")

在我的情况下,它工作,无论如何我不明白为什么视频的动态范围是默认限制的...

请参见:https://bugzilla.mozilla.org/show_bug.cgi？id = 1138024

Answer 3

Chrome 将默认使用开源 HTML5 视频编解码器进行不同的视频编码。
其他浏览器如 FireFox、Safari 和 IE 将默认使用 Flash。