Chrome Html5 视频无法显示白色，背景为灰色
Posted
技术标签:
【中文标题】Chrome Html5 视频无法显示白色，背景为灰色【英文标题】：Chrome Html5 video can't display white, has gray background 【发布时间】：2013-06-03 16:43:20 【问题描述】：我们有一个介绍页面，它在显示主站点内容之前播放 html5 视频。 该视频具有白色背景，因此它与页面背景无缝集成。 但是，在 chrome 浏览器中，整个视频的背景都是灰色的。
显然，2011 年的这些问题表明这是/现在是铬中的一个错误。他们还表示该错误已在最新的 chrome 更新中消失。但是，我下载了最新的chrome版本，27.0.1453.110 m，问题依旧吗？
html 5- Videos - White is washed off in Chrome
Unwanted Background color/artifact on HTML5 Video Tag
有人对此问题有任何解决方案或解决方法吗？ ...这个错误使我们的整个项目变得毫无用处...在我看来，尽管 html5 大肆宣传，但 chrome 从 2011 年开始就无法在视频中播放白人了？？
....... 编辑 .................................... ......
好的，我创建了一个 jsfiddle 项目： http://jsfiddle.net/Ykmya/5/
<body>
<video id="introVideo" oncanplay="playIntroVideo()">
<source src="http://users.telenet.be/A-I/ChromeBugTest.mp4" type="video/mp4" />
Uw browser ondersteunt geen html5 video
</video>
</body>
使用 Chrome 浏览时，您会看到灰色背景
....... 编辑 2 ...................... ......
使用 pandavengers 的答案，我添加了这个 css，结果可以接受：
@media screen and (-webkit-min-device-pixel-ratio:0)
video -webkit-filter: brightness(108.5%);
【问题讨论】：
你能设置新的 jsfiddle 吗？ 嗨克里斯蒂安，我已经创建了 jsfidlle 项目... 谢谢，但这里无法加载视频...你能检查一下吗？ 不，它似乎只在 jsfiddle 网站上的 Chrome 中加载。我已经在本地测试了代码，显然 Firefox 不想加载外部 mp4 文件..如果我将 src 更改为本地 mp4（相同文件），它加载没有问题......不要问我为什么:-) 【参考方案1】：http://jsfiddle.net/Ykmya/8/
这是一个简单的修复，我只是使用 webkit 过滤器提高了亮度。我打算将它绘制到画布上，然后过滤像素，这应该会更平滑，但我无法通过跨域访问您的视频。相反，我只是使用了 css 样式
video
-webkit-filter: brightness(108.5%);
编辑：我相信这已在最新版本的 Chrome 上得到修复。
【讨论】：
我截取了一张截图，然后使用 Paint 读取 RGB 值，它们与预期值相对接近 (+/- 1) 你可能想要创建 javascript 来检查浏览器是 Chrome 而不是其他任何东西，然后应用过滤器，我的示例只是一个非常简化的示例 我认为这个选择器仅将过滤器应用于 webkit 浏览器，即 Chrome 和 safari : @media screen and (-webkit-min-device-pixel-ratio:0) 是的，我只是担心 safari 视频可能会变得非常明亮。好吧，祝你好运！ 这行得通，谢谢！ 108.5% 有点激烈。我发现 101% 更接近我项目的原始值。【参考方案2】：我在来自多个供应商的浏览器中遇到了类似的背景问题。 windows 上的 firefox 和 mac 上的 chrome 中的深色背景。
我最终制作了两个版本的视频
WebM -> 非 IE mp4 -> 所有 IE
然后使用条件 cmets 设置视频排序
<!--[if !IE]><!-->
<source src="Content/Video/1.webmsd.webm" />
<source src="Content/Video/1.mp4" />
<!--<![endif]-->
<!--[if IE]><!-->
<source src="Content/Video/1.mp4" />
<source src="Content/Video/1.webmsd.webm" />
<!--<![endif]-->
【讨论】：
以上是关于Chrome Html5 视频无法显示白色，背景为灰色的主要内容，如果未能解决你的问题，请参考以下文章
html5 视频元素 1px chrome 上的白色底部边框