我有一个视频,客户想要“无缝地”坐在网站上.视频背景的HEX颜色与网站的HEX背景颜色相匹配,并在某些浏览器中呈现一些版本,有些时候？
最令人好奇的是,Chrome会以不同的方式渲染视频的背景,直到打开颜色选择器.然后他们突然相配.要清楚,一旦我打开颜色选择器,而不是调试器(只读：这不是重画的问题),它只会修复它.
当我第一次浏览网站时,Firefox会呈现不同的方式,但是如果我按下cmd r,就会变得完美无缝.
看看屏幕截图 – 他们说的话比我说的更多.
我正在说服客户改变为视频的白色背景,因为这肯定会“修复”,但是对于什么/为什么会发生这种情况,我非常好奇.
你的任何见解向导呢？
Codepen：http://codepen.io/anon/pen/zrJVpX
<div class="background" style="background-color: #e1dcd8; width: 100%; height: 100%;">
<div class="video-container">
<video id="video" poster="" width="90%" height="auto" preload="" controls style="margin-left: 5%; margin-top: 5%;">
<source id="mp4" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.mp4" type="video/mp4">
<source id="webm" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.webm" type="video/webm">
<source id="ogg" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.ogv" type="video/ogg">
We're sorry. This video is unable to be played on your browser.
</video>
</div>
</div>
解决方法
浏览器如何渲染视频可能是根本的,而不是简单的CSS / HTML修复.您的问题听起来类似于
this question.我认为答案在于渲染引擎和颜色空间差异的组合,这可能意味着没有很好的方法可以在浏览器之间进行修复.
在firefox上,您可以尝试使用颜色管理设置来查看是否改变了行为.这不会解决问题,但它可以帮助解释它.在URL /搜索栏中输入“about：config”.它应该带你到一个选项页面.另一个搜索栏会显示在页面中,输入“gfx.color_management.mode”.该选项可以取值0,1,2.尝试切换它们并重新加载页面(可能需要重新启动Firefox),看看是否可以获得一致的区别.如果颜色不是首先被管理,这可能不会有什么区别.
同样,您可以尝试在Chrome中禁用硬件加速视频解码.在chrome URL /搜索栏中输入“chrome：// flags”,然后找到“禁用硬件加速视频解码”标志.更改任何值,重新启动chrome,然后再次检查颜色.
