html - Chrome Html5 视频无法显示白色,有灰色背景

标签 html google-chrome webkit html5-video

我们有一个介绍页面,在显示主要站点内容之前播放 html5 视频。 视频背景为白色,与页面背景浑然一体。 但是,在 chrome 浏览器中,整个视频的背景都是灰色的。

显然,这些 2011 年的问题表明这是/现在是 Chrome 中的错误。他们还表示该错误已在最新的 chrome 更新中消失。但是,我下载了最新的chrome版本,27.0.1453.110m,问题依旧?

html 5- Videos - White is washed off in Chrome

Unwanted Background color/artifact on HTML5 Video Tag

enter image description here

有人对此问题有任何解决方案或解决方法吗? ...这个错误使我们的整个项目变得毫无用处...尽管 html5 大肆宣传,但自 2011 年以来 chrome 无法在视频中播放白人,这对我来说似乎令人难以置信??

....... 编辑...................................... .....................

好的,我已经创建了一个 jsfiddle 项目: http://jsfiddle.net/Ykmya/5/

<body>
<video id="introVideo" width="774" height="400"  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%); }
}

最佳答案

http://jsfiddle.net/Ykmya/8/

这是一个简单的修复方法,我只是使用 webkit 滤镜提高了亮度。我本来打算把它画到 Canvas 上,然后过滤像素,这应该会更平滑,但我无法通过跨域访问您的视频。相反,我只是使用了 css 样式

video{
     -webkit-filter: brightness(108.5%); 
}

编辑:我相信这已在最新版本的 Chrome 上修复。

关于html - Chrome Html5 视频无法显示白色,有灰色背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24638516/

相关文章:

javascript - 当使用 jQuery 从溢出区域外部对子元素进行动画处理时,元素不遵守隐藏的溢出

javascript - Trello 应用程序无法在 Angularjs (routeProvider) 中实例化

cocoa - 在 Cocoa 中使 WebKit 中的 WebView 可通过鼠标拖动

google-app-engine - 我怎样才能控制 WebKit 中的 Google App Engine 缓存行为(etags 变得疯狂)?

c# - 使用 WCF 服务应用程序从表单获取 POST 数据

css - 相对定位在 chrome 中使用 block 子元素但不适用于 inline-block 或 inline 子元素

angular - chrome (macOs) 不显示桌面推送通知

javascript - 无法让 Chrome 存储加载任何内容

css - webkit浏览器显示问题

javascript - IndexedDB中如何一一获取