HTML5 视频背景颜色与网站背景颜色不匹配——在某些浏览器中，有时答案

【问题标题】：HTML5 video background color not matching background color of website -- in some browsers, sometimesHTML5 视频背景颜色与网站背景颜色不匹配——在某些浏览器中，有时
【发布时间】：2016-05-14 21:18:34
【问题描述】：

我有一个客户想要“无缝”地放置在网站上的视频。视频的背景 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>

【问题讨论】：

您的笔正在请求身份验证。我做了一个新的：codepen.io/anon/pen/gPdVme，但似乎无法复制您的问题。您是否尝试过将所有背景设置为透明而不是着色？
@SwankyLegg 使用 diff (pub) 服务器修复了 codepen
嘿，我没弄明白，但是您是否尝试过使用“海报”属性：developer.mozilla.org/en-US/docs/Web/HTML/Element/… 用一致的颜色填充框架？
@SwankyLegg -- 是的，我在真实网站上有海报属性 -- 没有区别。我故意将其从代码笔中删除，因为当我忘记播放视频并最终将 PNG 与背景而不是视频与背景进行比较时，它让我感到困惑。
也许用 bt.709 或 bt.601 色彩空间编码您的测试视频会有所帮助。其中之一足够通用，可以肯定地在所有浏览器中呈现（但我不确定哪个最常用，例如：没有 Safari 可供测试等）。

标签： css html video html5-video background-color

【解决方案1】：

问题不仅取决于浏览器，还取决于渲染。只要浏览器使用硬件加速渲染视频，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~~ 对其进行了测试。编辑：测试来自 2017 年，但正如 cmets 中提到的那样 Jomal Johny，它不再在 IE11 中工作了。经过测试，我可以确认，2021年的IE11是不行的。

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

这是代码：

<!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 事件，尽管视频数据尚不能用于画布的 drawImage 函数。

如果canplay 或play 事件在画布获取像素之前被触发，函数isColorInRange 可以防止剧烈的背景变化。

重要的是，函数在视频元素之前定义。如果您在文档末尾加载 javascript，因为页面加载性能通常建议这样做，那么该方法将不起作用。

【讨论】：

我写了一篇文章，有一个例子。感谢@feng 的基础！ sansho.studio/blog/html-videos-correct-background-color
很好的答案，但是当在多个设备（iPad、带有 Radeon 显卡的 Windows 笔记本电脑和带有 GTX 显卡的笔记本电脑）上进行测试时，它在颜色的 HEX 值上有几个单位的差异，所以我猜它几乎可以解决问题。
代码在 IE11 中不起作用，视频背景黑色没有去除
代码有效（我不得不隐藏原始视频），但我无法让画布正确响应？尝试过这样的'window.onresize{canvas.width=vid.offsetWidth;ctx.drawImage(vid,0,0,vidWidth,vidHeight,0,0,canvas.width,canvas.height)'。是否有其他类似的响应式画布解决方案适用于此？

【解决方案2】：

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

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

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

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

【讨论】：

为什么选择这个答案？虽然解释了问题存在的原因，但肯定不能解决问题。

【解决方案3】：

导出sRGB 或Adobe RGB 中的视频和图像应该可以解决此问题。我们有一个颜色配置文件 HD (1-1-1) 的视频，这导致 Safari 中的视频背景比 Chrome 中的视频背景稍亮。 在 macOS 上测试

【讨论】：

【解决方案4】：

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

filter: contrast(101%);

来自Jack的原创想法。

【讨论】：

【解决方案5】：

导出第二个视频，但仅限于主视频的背景颜色。因此，现在您有了原始视频和第二个长度为 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>

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

*请注意，您的“背景视频”应该或多或少是一个正方形/矩形，以便在缩放时覆盖浏览器的宽度和高度。

【讨论】：

【解决方案6】：

我觉得这里的正确解决方案是使用绿屏拍摄（您可能已经这样做了）并使用

透明的 webm 视频或
使用 javascript canvas 将绿色像素替换为透明像素

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

【讨论】：

对于将来可能偶然发现此问题的任何人来说，值得注意的是：WebM（Chrome、Firefox 等）和 HEVC（Safari，包括 iOS Safari）支持 alpha 通道。使用单个 <video> 标记和上述每种格式的源代码可以为您提供跨浏览器的原生透明视频背景。

【解决方案7】：

检查这个工作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%;
}

【讨论】：