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

可能的原因

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

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

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

可能的解决方案

没有描述相关视频的技术/视觉细节，但根据视频内容，您可以通过使用 div 叠加层结合 CSS、画布或从外部淡出的图像创建蒙版来弥补一些缺陷背景（CSS）颜色到边缘的透明版本。请注意，加载图像可能会根据浏览器进行 ICC/gamma 转换。

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