草庐IT

html - 视频在 Safari 和 Chrome 中比在 Firefox 中渲染得稍微亮一些

coder 2023-08-12 原文

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

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

filter: saturate(100%)

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

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

最佳答案

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

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

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

关于html - 视频在 Safari 和 Chrome 中比在 Firefox 中渲染得稍微亮一些，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40127225/

中比微亮section的htmlcssgoogle-chromevideosafari

有关html - 视频在 Safari 和 Chrome 中比在 Firefox 中渲染得稍微亮一些的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - 渲染另一个 Controller 的 View - 2

    我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  5. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - 如何生成传递一些自定义参数的 `link_to` URL？ - 2

    我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD

  10. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

随机推荐