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

Question

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

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

filter: saturate(100%)

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

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

Answer 1

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

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

网络上的图像和 CSS 颜色通常采用 sRGB 颜色空间，但视频内部使用一些其他颜色空间，最常见的是 Rec. 709（高清）和 BT。601（旧标清电视）。

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

Rec 709 的 gamma 约为 2.4，sRGB 的 gamma 约为 2.2，因此不能在它们之间进行精确转换的软件会使亮度略有下降。709/601 混合会稍微改变色调。

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

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

您可以指望 Safari 能够正确执行所有这些操作，但在其他浏览器中，它通常存在无可救药的错误。考虑更改您的设计以隐藏差异？