HTML <video> 颜色与背景不匹配
HTML <video> colours not matching background
在我的电脑上，我一直在手动编写一个网站，我想包含一个在网站加载时自动播放的视频。我让它工作正常，并使用吸管工具找到了我正在使用的视频的背景颜色。我将我的页面背景设置为这种颜色（接下来的所有代码都过于简单化了）：
<div id="main">
<div id="vid">
<!-- assume video has background of #1122ff-->
<video src="test.mp4"></video>
</div>
</div>
CSS:
#main{
background-color:#1122ff;
}
当我在我的电脑和一个朋友的电脑上测试该网站时，视频与匹配的背景完美融合。但是，在我测试过的网站（chrome 和 safari）上的 3 台 MacBook 上，视频和背景的颜色之间存在明显差异。我试图通过实现将视频绘制到 canvas 上的 JS 来纠正此问题，对背景的颜色采样 1 个像素并将主背景设置为此，但它没有任何改变。我不知道为什么会这样，如果有人能解释为什么会这样，以及如何纠正它，我将不胜感激。
可能的原因
不同的系统有不同的 gamma 设置，硬件加速 video/content 覆盖甚至可能有单独的 gamma 系统设置。
实际的伽马调整可以来自简单的伽马值或 ICC 配置文件，具体取决于系统和浏览器，并且无法通过浏览器中的任何 API 获得。简单的伽玛会特别影响中间色调，但如果伽玛来自 ICC 配置文件，任何级别和色调都可能受到影响。
当然没有简单的方法来处理所有系统和颜色设置组合。
可能的解决方案
没有 technical/visual 描述相关视频的详细信息，但根据视频内容，您可以通过使用 div 叠加层结合 CSS、canvas 或图像从外部背景 (CSS) 颜色褪色到边缘的透明版本。请注意，加载图像可能会受到 ICC/gamma 转换的影响，具体取决于浏览器。
您也可以尝试“另一种方式”，使用 canvas（或视频编辑器并在没有 ICC/gamma 的情况下保存图像）从视频背景中采样一帧，然后设置作为重复的背景图像而不是颜色。
在我的电脑上，我一直在手动编写一个网站，我想包含一个在网站加载时自动播放的视频。我让它工作正常，并使用吸管工具找到了我正在使用的视频的背景颜色。我将我的页面背景设置为这种颜色（接下来的所有代码都过于简单化了）：
<div id="main">
<div id="vid">
<!-- assume video has background of #1122ff-->
<video src="test.mp4"></video>
</div>
</div>
CSS:
#main{
background-color:#1122ff;
}
当我在我的电脑和一个朋友的电脑上测试该网站时，视频与匹配的背景完美融合。但是，在我测试过的网站（chrome 和 safari）上的 3 台 MacBook 上，视频和背景的颜色之间存在明显差异。我试图通过实现将视频绘制到 canvas 上的 JS 来纠正此问题，对背景的颜色采样 1 个像素并将主背景设置为此，但它没有任何改变。我不知道为什么会这样，如果有人能解释为什么会这样，以及如何纠正它，我将不胜感激。
可能的原因
不同的系统有不同的 gamma 设置，硬件加速 video/content 覆盖甚至可能有单独的 gamma 系统设置。
实际的伽马调整可以来自简单的伽马值或 ICC 配置文件，具体取决于系统和浏览器，并且无法通过浏览器中的任何 API 获得。简单的伽玛会特别影响中间色调，但如果伽玛来自 ICC 配置文件，任何级别和色调都可能受到影响。
当然没有简单的方法来处理所有系统和颜色设置组合。
可能的解决方案
没有 technical/visual 描述相关视频的详细信息，但根据视频内容，您可以通过使用 div 叠加层结合 CSS、canvas 或图像从外部背景 (CSS) 颜色褪色到边缘的透明版本。请注意，加载图像可能会受到 ICC/gamma 转换的影响，具体取决于浏览器。
您也可以尝试“另一种方式”，使用 canvas（或视频编辑器并在没有 ICC/gamma 的情况下保存图像）从视频背景中采样一帧，然后设置作为重复的背景图像而不是颜色。