匹配视频背景到页面背景

Question

我有一个内嵌橙色背景的视频，并希望它与身体css背景无缝融合。不幸的是，视频颜色总是突出显示取决于浏览器或显示器颜色配置文件。知道如何实现这个目标吗？

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

1. 对每个浏览器的背景颜色进行硬编码。这适用于同一台机器，但是当使用具有不同颜色配置文件的不同显示器时，它就是falis。
2. 我拍摄了第一个视频帧并将其放入画布中。然后我从画布中取出背景颜色并将其应用到身体上。除了野生动物园之外，这种方法无处不在。
3. 我没有使用css背景颜色，而是使用了具有相同背景的第二个视频并将其拉伸以匹配页面大小（因此它位于第一个视频下并且像背景一样）。除了safari之外，其他地方也可以使用。

有什么我想念的吗？还有其他想法吗？关于为什么我尝试的几乎所有东西都在safari上失败的任何线索？

Answer 1

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

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

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

在Internet Explorer中，“Internet选项”中有一个设置＆gt;高级称为使用软件渲染而不是GPU渲染

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

Answer 2

无法找到所有浏览器/播放器/平台组合产生的不同颜色（既不是事先也不是在运行时）。

因此，我能想到的唯一解决方法是将视频用作整个背景，并在视频中包含足够的空白区域。

CSS3的一个示例是让视频覆盖您的容器：

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

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

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