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 (用于HD)和BT。601 (旧标清电视)。

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

REC709有伽马~2.4，sRGB有伽马~2.2，所以不能在它们之间精确转换的软件将使亮度略有下降。709/601的混淆会稍微改变一下色调。

为了让视频颜色与CSS颜色完全匹配，所有的明星都必须对齐：

用于生成视频的

1. 软件需要读取sRGB中的颜色并将其正确转换为视频的颜色空间(例如，Rec.709)。它可能不会，除非你设置了适当的flags/checkboxes.
2. Information关于视频色彩空间应该嵌入到视频文件的元数据中，这样播放器就不会猜到了。一些播放器无论如何都会猜测(例如，火狐假定低分辨率视频不能使用高清色彩空间)。
3. 播放器(浏览器)必须了解视频色彩空间，并能够为视频选择正确的色彩空间。
4. 浏览器必须播放视频，并将颜色转换到显示色彩空间(上次我检查火狐没有这样做，除非你手动启用隐藏选项)。
5. 浏览器必须将CSS颜色从sRGB转换为显示色彩空间(否则，保留CSS颜色，但始终将视频转换为sRGB)。Chrome在这方面做得很差。

你可以指望Safari能正确地完成所有这些工作，但在其他浏览器中，它通常会出现无可救药的but。考虑改变你的设计来隐藏差异吗？

Answer 2

我在Chrome for Android上注意到了这一点，所以我使用了以下代码来定位Android上的Chrome：

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

...but在全屏模式下不起作用。

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

这就完全解决了这个问题。