Javascript 将视频背景与页面背景匹配

我有一个视频播放与橙色背景内联，并希望它无缝地与身体css背景合并。不幸的是，根据浏览器或显示器的颜色配置文件，视频颜色总是很突出。你知道如何做到这一点吗

到目前为止，我尝试了3种解决方案：

硬编码每个浏览器的背景色。这在同一台机器上工作，但当使用具有不同颜色配置文件的不同显示器时，它是无效的

我把第一个视频帧放在画布上。然后我从画布上提取背景色，并将其应用到身体上。除了狩猎，这在任何地方都有效

我没有使用css背景色，而是使用了具有相同背景的第二个视频，并将其拉伸以匹配页面大小（因此，它位于第一个视频下，就像背景一样）。除了狩猎，它在任何地方都能工作

---

我有什么遗漏吗？还有其他想法吗？关于我在safari上尝试的几乎所有东西都失败的原因，有什么线索吗？

根据我的经验，这可能是硬件加速解码视频造成的。要确认这是否是您的问题，您可以在浏览器中暂时禁用HA

在Chrome中，将其粘贴到地址栏中

chrome://flags/#disable-accelerated-video-decode

在Internet Explorer中，Internet选项>高级中有一个名为使用软件渲染而不是GPU渲染的设置

---

不幸的是，在我的案例中，我能够找到问题的解决方案，因为我们对访问者配置的这一部分几乎没有控制权。在我们的例子中，我们选择了一种不涉及视频背景和html元素背景之间无缝合并的设计。

不可能找出所有浏览器/播放器/平台组合产生的不同颜色（既不是事先，也不是在运行时）

因此，我能想到的唯一解决办法是使用视频作为整个背景，并在视频中包含足够的空白

CSS3使视频覆盖容器的一个示例：

.container {
  position: relative;
}
.background-video {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  object-fit: cover;
}

为了更好地控制视频中心（焦点）的位置和大小，您需要使用自己的定位规则进行替换

---

视频权重（MB）不会增长太多，因为背景是纯色，帧与帧之间不会发生变化。

可能的重复您是否尝试将整个视频渲染到每个设备的画布中？颜色还会有差别吗？因为CPU需要进行解码，所以它的性能可能不是很好，但结果可能更独特？差不多两年后，我在做同一个项目。这是一个过山车的旅程，一路上我放弃了让它匹配。根据浏览器和平台的不同，软件更新会随着时间的推移改变匹配矩阵。同样编码的视频现在可以在safari上使用，但在Mac上的chrome上不再匹配——最初是另一种方式。您提到的画布方法似乎是最好的选择，但我不记得当时为什么不选择它-可能是在低端设备（平板电脑等）上的性能。我可以确认方法2的Safari例外。现在您看到了其他浏览器中此方法的不同之处了吗？