视频在 Safari 和 Chrome 中的渲染比在 Firefox 中略亮

Posted 2023-03-04

【中文标题】视频在 Safari 和 Chrome 中的渲染比在 Firefox 中略亮

【英文标题】：Video renders slightly brighter in Safari and Chrome than in Firefox

【发布时间】：2017-02-28 20:20:55

【问题描述】：

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

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

filter: saturate(100%)

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

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

【问题讨论】：

我也注意到了这一点。感谢分享过滤技巧。

【参考方案1】：

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

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

网络上的图像和 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 正确地执行所有这些操作，但在其他浏览器中，它通常是无可救药的错误。考虑更改您的设计以隐藏差异？

【参考方案2】：

我在 android 版 Chrome 上注意到了这一点，因此我使用以下代码来定位 Android 版 Chrome：

@media screen and (-webkit-min-device-pixel-ratio:3) and (pointer:coarse)
video:first-child 
    filter: contrast(1)
    

...但它不适用于全屏。

我最终发现的建议是将chrome://flags/#force-color-profile 设置为sRGB

这完全解决了问题。