HTML <video>颜色与背景不匹配

Question

在我的电脑上，我一直在手工编写一个网站，我想要在网站上加载一个自动播放的视频。我把它弄好了，使用吸管工具找到了我正在使用的视频的背景颜色。我将页面背景设置为这种颜色（所有要遵循的代码都是过于简单化）：

<div id="main">
    <div id="vid">
        <!-- assume video has background of #1122ff-->
        <video src="test.mp4"></video>
    </div>
</div>

CSS：

#main{
    background-color:#1122ff;
}

当我在我的电脑和朋友的网站上测试网站时，视频与匹配的背景完美融合。然而，在3台MacBook上我测试了网站（包括chrome和safari），视频的颜色和背景颜色之间存在显着差异。我尝试通过实现JS将视频绘制到画布上，对背景的1个像素进行采样并将主背景设置为此来尝试纠正此问题，但它没有改变任何内容。我不知道为什么会这样，如果有人能解释为什么会这样，以及如何纠正它，我将非常感激。

Answer 1

可能原因

不同的系统具有不同的伽玛设置，甚至可能还有单独的伽玛系统设置用于硬件加速视频/内容叠加。

实际的伽玛调整可以来自简单的伽玛值或ICC配置文件，具体取决于系统和浏览器，并且不能通过浏览器中的任何API获得。简单的伽玛会影响特别是中间色调，但如果伽马来自ICC配置文件，任何级别和音调都可能会受到影响。

当然，没有简单的方法来处理所有系统和颜色设置组合。

可能的解决方案

没有技术/视觉细节描述相关视频，但根据视频内容，您可以通过使用div叠加结合CSS，画布或从外部褪色的图像创建遮罩来补偿某些遮罩。背景（CSS）颜色为边缘的透明版本。请注意，加载图片可能会受到ICC / gamma转换的影响，具体取决于浏览器。

您也可以尝试“另一种方式”，使用画布（或视频编辑器从视频背​​景中采样帧并保存没有ICC ​​/ gamma的图像），然后将其设置为重复的背景图像而不是颜色。