我正在尝试将视频的一小部分放在较大的静态 PNG 背景上，并且视频的边缘应该无缝地融入背景，即。您应该无法识别视频的结束位置和背景中的静态图像的开始位置。
但是，我发现每个浏览器呈现的视频颜色都不同。在 Chrome 中，这取决于您是否添加任何 CSS 过滤器 (-webkit-filter) 属性，例如
filter: saturate(100%)
(根本不应该改变视频)。我创建了这个 JSFiddle 来演示问题 https://jsfiddle.net/bj4hshwz/1/ .没有它，它会使视频稍微亮一些。使用 filter 属性，视频更暗/更饱和(在我的情况下与背景相匹配)。 Firefox 正确呈现视频并且它与背景相匹配，而在 Safari 中，无论您是否添加过滤器，它总是更亮。
有没有办法让 Safari 中的视频也正确？
最佳答案
无操作过滤器更改渲染是一个错误。您应该将其报告给浏览器供应商。您简化的测试用例将有助于解决此问题。
除此之外，视频中的颜色配置文件处理存在问题，而且有点乱。
网络上的图像和 CSS 颜色通常采用 sRGB 颜色空间，但视频在内部使用其他一些颜色空间，最常见的是 Rec. 709(用于高清)和 BT。 601(旧标清电视)。
问题是这些配置文件非常相似，以至于很多软件不关心它们之间的转换，或者转换不正确(这很容易，因为有太多微妙的不兼容颜色空间称为“YUV”)。只有当您尝试准确匹配颜色时(就像您所做的那样)，错误才会变得明显。
Rec 709 的 Gamma 约为 2.4，而 sRGB 的 Gamma 约为 2.2，因此不能在它们之间进行精确转换的软件会使亮度略有下降。 709/601 混淆会稍微改变色调。
要使视频颜色与 CSS 颜色完全匹配，所有星星必须对齐:
- 您用来生成视频的软件需要读取 sRGB 中的颜色并将其正确转换为视频的颜色空间(例如 Rec. 709)。它可能不会，除非您设置适当的标志/复选框。
- 有关视频色彩空间的信息应嵌入到视频文件的元数据中，以免播放器猜测。有些玩家无论如何都会猜测(例如，Firefox 假定低分辨率视频不能使用高清色彩空间)。
- 播放器(浏览器)必须了解视频色彩空间并能够为视频选择正确的色彩空间。
- 浏览器必须播放视频并将颜色转换为显示颜色空间(上次我检查 Firefox 没有这样做，除非您手动启用隐藏选项)。
- 浏览器必须将 CSS 颜色从 sRGB 转换为显示颜色空间(或者做不到这一点，不理会 CSS 颜色，但始终将视频转换为 sRGB)。 Chrome 在这方面非常糟糕。
您可以指望 Safari 正确地完成所有这些，但在其他浏览器中，它通常有无可救药的错误。考虑更改您的设计以隐藏差异？
关于html - 视频在 Safari 和 Chrome 中比在 Firefox 中渲染得稍微亮一些，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40127225/