Safari和Chrome中的视频呈现比Firefox更亮一些

Posted 2021-05-07

我试图在较大的静态PNG背景上放置视频的一小部分，并且视频的边缘应该无缝地融合到背景中，即。您应该无法识别视频结束的位置以及后台静态图像的开始。

但是，我发现每个浏览器都会以不同的方式呈现视频颜色。在Chrome中，它取决于您是否添加任何CSS过滤器（-webkit-filter）属性

filter: saturate(100%)

（根本不应该改变视频）。我创建了这个JSFiddle来演示问题https://jsfiddle.net/bj4hshwz/1/。没有它，它会使视频略微亮一些。使用filter属性，视频更暗/更饱和（在我的情况下匹配背景）。 Firefox正确呈现视频并且与背景匹配，在Safari中，无论您是否添加过滤器，它总是更亮。

有没有办法让Safari中的视频也正确？

答案

无操作过滤器更改渲染是一个错误。您应该将其报告给浏览器供应商。您减少的测试用例将有助于解决此问题。

除此之外，在视频中存在颜色配置文件处理的问题，这有点乱。

网络上的图像和CSS颜色通常基于sRGB色彩空间，但视频内部使用一些其他色彩空间，最常见的是Rec。 709（用于HD）和BT。 601（旧SD电视）。

问题是这些配置文件足够相似，以至于许多软件不关心它们之间的转换，或者转换不正确（这很容易，因为有很多微妙的不兼容的颜色空间称为“YUV”）。只有当您尝试完全匹配颜色时（就像您一样），错误才会变得明显。

Rec 709具有gamma~2.4且sRGB具有gamma~2.2，因此不能在它们之间精确转换的软件将使亮度稍微偏离。 709/601混淆会稍微改变色调。

要使视频颜色与CSS颜色完全匹配，所有星星必须对齐：

1. 用于生成视频的软件需要读取sRGB中的颜色并将其正确转换为视频的色彩空间（例如Rec.709）。它可能不会，除非您设置适当的标志/复选框。
2. 有关视频色彩空间的信息应嵌入视频文件的元数据中，以便玩家不会猜测它。有些玩家无论如何都会猜测（例如Firefox假设低分辨率视频无法使用高清色彩空间）。
3. 播放器（浏览器）必须了解视频色彩空间，并能够为视频选择正确的色彩空间。
4. 浏览器必须播放视频，将颜色转换为显示颜色空间（上次我检查Firefox没有这样做，除非您手动启用隐藏选项）。
5. 浏览器必须将sRGB中的CSS颜色转换为显示颜色空间（或者失败，只留下CSS颜色，但始终将视频转换为sRGB）。 Chrome非常糟糕。

你可以指望Safari正确地完成所有这些工作，但在其他浏览器中，它通常是无可救药的错误。考虑更改您的设计以隐藏差异？