HTML5 视频背景颜色与网站背景颜色不匹配——在某些浏览器中，有时 [英] HTML5 video background color not matching background color of website -- in some browsers, sometimes

问题描述

我有一个视频，客户想要无缝"地坐在网站上.视频的背景 HEX 颜色与网站的 HEX 背景颜色相匹配，并且在某些浏览器、某些版本、某些时间中呈现为这样?

最奇怪的是 Chrome 以不同的方式呈现视频的背景，直到您打开颜色选择器.然后他们突然匹配.需要明确的是，它只会在我打开颜色选择器后修复它，而不是调试器(阅读:这不是重绘问题).

当我第一次导航到该网站时，Firefox 的呈现方式有所不同，但如果我按 cmd+r，它就会变得完美无缝.

看看屏幕截图 - 他们说的比我能用语言表达的要多.

我正在说服客户将视频更改为白色背景，因为这肯定会修复"它，但我非常好奇这是什么/为什么会发生这种情况.

你们的向导有什么见解吗?

<小时>

代码笔:

解决方案

这似乎是浏览器呈现视频的基础，而不是简单的 CSS/HTML 修复.您的问题听起来类似于这个问题.我敢打赌答案在于渲染引擎和色彩空间差异的某种组合，这可能意味着没有好的方法可以跨浏览器修复它.

在 firefox 上，您可以尝试摆弄颜色管理设置，看看是否会改变行为.这不会解决问题，但可以帮助解释它.在 URL/搜索栏中，输入about:config".它应该带你到一个选项页面.页面中会出现另一个搜索栏，输入gfx.color_management.mode".该选项可以取值 0、1、2.尝试切换它们并重新加载页面(可能需要重新启动 firefox)以查看是否可以获得一致的差异.不过，如果不首先管理颜色，可能不会有任何区别.

同样，您可以尝试在 chrome 中禁用硬件加速视频解码.在chrome URL/搜索栏中输入chrome://flags"，然后找到禁用硬件加速视频解码"标志.更改任何值，重新启动chrome，然后再次检查颜色.

我意识到这些都不是解决方案，这可能更适合作为评论，但我还没有代表.

I have a video that the client wants to sit "seamlessly" in the website. The background HEX color of the video matches the HEX background color of the website, and renders as such in some browsers, some versions, some of the time?

What is most curious is Chrome renders the background of the video differently, until you open the color picker. Then they suddenly match. To be clear, it only fixes it once I open the color picker, not the debugger (read: this not a repainting issue).

Firefox renders differently when I first navigate to the site, but if I hit cmd+r, it becomes perfectly seamless.

Take a look at the screenshots - they say more than I can with words.

I'm in the process of convincing the client to change to white background for the video as that will certainly "fix" it, but I'm super curious as to what /why this is happening.

Any insights from you wizards out there?

---

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>

解决方案

It seems like it might be fundamental to how the browsers render video, and not an easy CSS/HTML fix. Your question sounds similar to this question. I am betting the answer lies in some combination of rendering engines and colorspace differences, which may mean there is no good way to fix it across browsers.

On firefox, you could try fiddling with color management settings to see if that changes the behavior. This won't fix the problem, but it could help explain it. In the URL/search bar, enter "about:config". It should take you to an options page. Another search bar will appear rendered in the page, enter "gfx.color_management.mode". That option can take values 0,1,2. Try switching them up and reloading the page (may need to restart firefox) to see if you can get a consistent difference. It's possible it won't make any difference if the color is not being managed in the first place though.

Similarly, you could try disabling hardware-accelerated video decode in chrome. Enter "chrome://flags" in the chrome URL/search bar, then find the flag "Disable hardware-accelerated video decode". Change whatever value it is, restart chrome, and check the colors again.

Neither of these are solutions I realize, this may have been better served as a comment, but I don't have the rep for that yet.

这篇关于HTML5 视频背景颜色与网站背景颜色不匹配——在某些浏览器中，有时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！