Question

我有一个视频，客户希望“无缝地”坐在网站上。视频的背景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>

Answer 1

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

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

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

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

Answer 2

问题不仅仅取决于浏览器，还取决于渲染。一旦浏览器使用硬件加速渲染视频，GPU首选项就会影响颜色。

例如，如果您使用的是Nvidia显卡，则可以在Nvidia控制面板中更改颜色首选项。桌面显示器通常使用 0到255 的完整RGB范围，但您也可以配置 16到235 的有限RGB范围。有限的范围通常用于电视。

一方面，图形卡驱动程序有时会将桌面显示器的颜色范围默认为有限的RGB范围。另一方面，用户可以自己更改此值。由于您无法影响用户的浏览器设置或图形卡驱动程序设置，因此不同用户始终存在差异。

颜色如何受到影响：

Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB

以下是解决此问题的方法：

我已经使用Chrome，Chrome智能手机，Edge，Firefox和Internet Explorer 11对其进行了测试。

视频准备好播放或播放后，请检查视频的第一个像素并相应更改周围容器的背景颜色。无论浏览器设置和渲染配置如何，这都将有效。

这是代码：

<!doctype html>

<html>
<head>
    <title>Video</title>
    <script>
        function isColorInRange(expectedColor, givenColor) {
            const THRESHOLD = 40;
            for (var i = 0; i < 3; i++) {
                if (((expectedColor[i] - THRESHOLD) > givenColor[i]) 
                 || ((expectedColor[i] + THRESHOLD) < givenColor[i])) {
                    return false;
                }
            }
            return true;
        }

        function setVideoBgColor(vid, nativeColor) {
            if (vid) {
                var vidBg = vid.parentElement;
                if (vidBg) {
                    // draw first pixel of video to a canvas
                    // then get pixel color from that canvas
                    var canvas = document.createElement("canvas");
                    canvas.width = 1;
                    canvas.height = 1;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(vid, 0, 0, 1, 1);

                    var p = ctx.getImageData(0, 0, 1, 1).data;
                    //console.log("rgb(" + p[0] + "," + p[1] + "," + p[2] + ")");
                    if (isColorInRange(nativeColor, p)) {        
                        vidBg.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
                    }
                }
            }
        }

        function setVideoBgColorDelayed(vid, nativeColor) {
            setTimeout(setVideoBgColor, 100, vid, nativeColor);
        }
    </script>
    <style>
    body {
        margin: 0;
    }

    #my-video-bg {
        height: 100vh;
        display: flex;
        align-items: center;
        background-color: rgb(8,31,60);
    }

    #my-video {
        max-width: 100%;
        margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id="my-video-bg">
        <video id="my-video" preload="metadata" onplay="setVideoBgColorDelayed(this,[8,31,60])" oncanplay="setVideoBgColorDelayed(this,[8,31,60])" controls>
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
</body>
</html>

play事件和setVideoBgColorDelayed功能适用于Internet Explorer等浏览器，有时会触发canplay事件，但{{1}尚未提供视频数据画布的功能。

如果在画布获取像素之前触发了drawImage或isColorInRange事件，则函数canplay可以防止严重的背景更改。

重要的是，功能是在视频元素之前定义的。如果您在文档末尾加载javascript，因为它通常是因为页面加载性能而建议的，那么该方法将无法正常工作。

Answer 3

导出sRGB或Adobe RGB中的视频和图片可以解决此问题。我们有一个带有collor个人资料HD (1-1-1)的视频，这导致Safari中的视频背景略微变淡，而不是Chrome。 在macOS上测试

Answer 4

检查此工作demo。

将视频容器的背景颜色定义为＃e1dcd8;

或用以下内容替换现有的css：

 body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
.background {
    background-color: #e1dcd8;
  width: 100%;
  height: 100%;
}

.video-container{
  background:  #e1dcd8;
}

video {
  margin-left: 5%;
  margin-top: 5%;
}

Answer 5

我觉得这里适当的解决方案是使用绿屏（你可能已经做过）拍摄并使用

Transparant webm video或
使用javascript canvas

可以在此处找到透明视频的示例： https://jakearchibald.com/scratch/alphavid/

Answer 6

如果您的背景是纯黑色或白色，您只需在css中略微增加对比度，问题就会完全解决：

-webkit-filter: contrast(101%);
filter: contrast(101%);

来自Jack的原创想法。

Answer 7

导出第二个视频，但仅将其限制为您在主视频中具有的背景色。因此，现在您有了原始视频，还有第二个视频，该视频长度为1秒，仅是纯色。

该视频标签应具有以下CSS：

#bg-video {
    position: fixed;
    width: 100vw;
    z-index: -1;
}

，视频标签可以位于文档的顶部。

<body>
    <video id="bg-video" src="assets/bg.mp4" muted></video>
    <div>your main site html here</div>
</body>

由于两个视频的导出方式相同，因此颜色也应在多个浏览器和/或操作系统上呈现相同的颜色。

*请注意，您的“背景视频”应大致为正方形/矩形，以便在缩放时可以覆盖浏览器的宽度和高度。

HTML5视频背景颜色与网站的背景颜色不匹配 - 有时在某些浏览器中

7 个答案:

颜色如何受到影响：

以下是解决此问题的方法：