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

问题描述

我有一个客户想要在网站上无缝坐下的视频。该视频的背景HEX颜色与网站的HEX背景颜色相匹配，并在某些浏览器中呈现某些版本，有些时候？

什么是最好奇的是，Chrome会以不同的方式呈现视频的背景，直到您打开拾色器。然后他们突然相配。要清楚，它只在我打开颜色选择器而不是调试器时修复它（读：这不是重新绘制的问题）。

当我第一次导航到该网站时，Firefox呈现的方式不同，但如果我点击了cmd + r，它将变得完美无瑕。

看看屏幕截图 - 他们说的话比我能说的还多。

我正在说服客户端改为白色背景对于视频而言，它肯定会修复它，但我对这种事情发生的原因感到非常好奇。

你的任何洞察力向导都是奇才？

---

Codepen：

解决方案

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

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

同样，您可以尝试禁用chrome中的硬件加速视频解码。在chrome URL /搜索栏中输入chrome：// flags，然后找到禁用硬件加速视频解码标志。

这些都不是我意识到的解决方案，这可能更好地作为评论，但我还没有代表。

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屋！