任何白色背景的视频(我可以制作)在Firefox, Chrome和Safari中都是灰色的(在IE中是白色的)。嗯，在我的Windows电脑上它是灰色的，在我的Android手机/平板电脑和Mac上它是白色的…

我使用ffmpeg来编码视频。如果我将其编码为webm，则背景为白色。

见:https://jsfiddle.net/Lbg8f6ck/

我发现了一个修复Chrome的hack:

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

但是不能在Firefox和Safari中使用

Firefox的另一个改进:

filter:brightness(1.085)

但是由于某些原因，通过JavaScript设置它不工作。

几个版本前的背景是白色的Chrome，然后又变成灰色…

问题是:为什么白色是灰色的?

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

有可能得到一个白色的背景吗?

有什么hack，变通方法吗?

经过长时间的搜索和测试，这里是一个工作解决方案

解决方案:

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+ */
}

<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动画和音频

Capture Firefox:
https://i.stack.imgur.com/tWWqm.jpg

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

打开NVIDIA控制面板
在"视频"下选择"调整视频颜色设置"
在"如何进行颜色调整"下选择"使用NVIDIA设置"
在"高级"下确保"动态范围"为"完全(0-255)"而不是"限制(16-235)"("动态对比度增强"应未选中)
在我的情况下，它工作了，无论如何，我不明白为什么视频的动态范围是有限的默认…

请看这里:https://bugzilla.mozilla.org/show_bug.cgi?id=1138024

由于亮度解决方案使iOS中的所有内容都比白色更亮，所以我必须找到另一个解决方案。

(更好的)解决方法是设置0.000001%或更大的边框半径。然后白色不再显示为灰色。

<video autoplay loop playsinline muted style="border-radius:0.000001%;"> <source src="whatever.mp4" type="video/mp4"> </video>
希望有帮助，谢谢

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

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

解决方案:

解决方案演示

问题演示

相关内容

最新更新

热门标签：