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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Safari和Chrome中的视频呈现比Firefox更亮一些相关的知识,希望对你有一定的参考价值。

我试图在较大的静态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正确地完成所有这些工作,但在其他浏览器中,它通常是无可救药的错误。考虑更改您的设计以隐藏差异?

以上是关于Safari和Chrome中的视频呈现比Firefox更亮一些的主要内容,如果未能解决你的问题,请参考以下文章

是否需要在 Safari 和 Chrome 中测试网页?

Safari 和 Chrome 中的 HTML5 视频海报属性

Tomcat 启用 CORS:来自 Safari 的 POST 请求返回 200,Chrome 和 Firefox 返回 403

Html.RadioButtonFor 单选按钮不在 Safari 或 Chrome 中呈现

在 Safari 和 Mobile Chrome 上以编程方式播放有声视频

VideoJS 适用于 safari 但不适用于 chrome 中的某些带有 CORS 的视频