css – HTML5视频背景颜色不匹配网站的背景颜色 – 有些浏览器有时

我有一个视频,客户想要“无缝地”坐在网站上.视频背景的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,然后再次检查颜色.

这两个都不是我意识到的解决方案,这可能会更好地作为一个评论,但我没有这个代表.

原文地址：https://www.jb51.cc/css/217093.html