HTML5视频背景颜色与网站的背景颜色不匹配 - 有时在某些浏览器中
tay*_*ano 22 css video html5 background-color html5-video
我有一个视频,客户想要"无缝地"坐在网站上.视频的背景HEX颜色与网站的HEX背景颜色相匹配,并在某些浏览器中呈现,某些版本,某些时候？
最令人好奇的是Chrome以不同方式呈现视频背景,直到您打开颜色选择器.然后他们突然匹配.要清楚,它只在我打开颜色选择器而不是调试器时修复它(读:这不是重新绘制的问题).
当我第一次导航到网站时,Firefox呈现的方式不同,但如果我点击cmd + r,它就变得完全无缝.
看一下屏幕截图 - 他们说的话多于我能说的话.
我正在说服客户改变视频的白色背景,因为这肯定会"修复"它,但我对这是怎样/为什么会发生这种情况非常好奇.
你在巫师的任何见解？
Codepen:http://codepen.io/anon/pen/zrJVpX
<div class="background" style="background-color: #e1dcd8; width: 100%; height: 100%;">
<div class="video-container">
<video id="video" poster="" width="90%" height="auto" preload="" controls style="margin-left: 5%; margin-top: 5%;">
<source id="mp4" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.mp4" type="video/mp4">
<source id="webm" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.webm" type="video/webm">
<source id="ogg" src="http://bigtomorrowdev.wpengine.com/wp-content/themes/bigtomorrow/images/videos/bt-process.ogv" type="video/ogg">
We're sorry. This video is unable to be played on your browser.
</video>
</div>
</div>
似乎它可能是浏览器呈现视频的基础,而不是简单的CSS/HTML修复.你的问题听起来与这个问题相似.我打赌答案在于渲染引擎和颜色空间差异的某种组合,这可能意味着没有好的方法可以跨浏览器修复它.
在Firefox上,您可以尝试摆弄颜色管理设置,看看是否会改变行为.这不会解决问题,但它可以帮助解释它.在URL /搜索栏中,输入"about:config".它应该带你到一个选项页面.另一个搜索栏将显示在页面中,输入"gfx.color_management.mode".该选项可以取值0,1,2.尝试切换它们并重新加载页面(可能需要重新启动firefox)以查看是否可以获得一致的差异.如果首先没有管理颜色,它可能没有任何区别.
同样,您可以尝试在chrome中禁用硬件加速视频解码.在chrome URL /搜索栏中输入"chrome:// flags",然后找到"禁用硬件加速视频解码"标志.更改它的任何值,重新启动chrome,然后再次检查颜色.
这些都不是我认识到的解决方案,这可能更好地作为评论,但我还没有代表.
- 为什么选择这个答案？虽然解释了问题存在的原因，但肯定没有解决问题。 (5认同)
小智 7
问题不仅仅取决于浏览器,而是依赖于渲染.一旦浏览器使用硬件加速渲染视频,GPU首选项就会影响颜色.
例如,如果您使用的是Nvidia显卡,则可以在Nvidia控制面板中更改颜色首选项.桌面监视器通常使用0到255的完整RGB范围,但您也可以配置从16到235的有限RGB范围.有限的范围通常用于电视.
一方面,图形卡驱动程序有时会将桌面显示器的颜色范围默认为有限的RGB范围.另一方面,用户可以自己更改此值.由于您无法影响用户的浏览器设置或图形卡驱动程序设置,因此不同用户始终存在差异.
颜色如何受到影响:
Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB
以下是我解决此问题的方法:
我已经使用Chrome,Chrome智能手机,Edge,Firefox和Internet Explorer 11对其进行了测试.
一旦视频准备好播放或播放,请检查视频的第一个像素并相应地更改周围容器的背景颜色.无论浏览器设置和渲染配置如何,这都将起作用.
这是代码:
<!doctype html>
<html>
<head>
<title>Video</title>
<script>
function isColorInRange(expectedColor, givenColor) {
const THRESHOLD = 40;
for (var i = 0; i < 3; i++) {
if (((expectedColor[i] - THRESHOLD) > givenColor[i])
|| ((expectedColor[i] + THRESHOLD) < givenColor[i])) {
return false;
}
}
return true;
}
function setVideoBgColor(vid, nativeColor) {
if (vid) {
var vidBg = vid.parentElement;
if (vidBg) {
// draw first pixel of video to a canvas
// then get pixel color from that canvas
var canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
var ctx = canvas.getContext("2d");
ctx.drawImage(vid, 0, 0, 1, 1);
var p = ctx.getImageData(0, 0, 1, 1).data;
//console.log("rgb(" + p[0] + "," + p[1] + "," + p[2] + ")");
if (isColorInRange(nativeColor, p)) {
vidBg.style.backgroundColor = "rgb(" + p[0] + "," + p[1] + "," + p[2] + ")";
}
}
}
}
function setVideoBgColorDelayed(vid, nativeColor) {
setTimeout(setVideoBgColor, 100, vid, nativeColor);
}
</script>
<style>
body {
margin: 0;
}
#my-video-bg {
height: 100vh;
display: flex;
align-items: center;
background-color: rgb(8,31,60);
}
#my-video {
max-width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="my-video-bg">
<video id="my-video" preload="metadata" onplay="setVideoBgColorDelayed(this,[8,31,60])" oncanplay="setVideoBgColorDelayed(this,[8,31,60])" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
该play事件和setVideoBgColorDelayed功能是如Internet Explorer,有时已经火浏览器的canplay情况下,虽然视频数据尚不可用的drawImage画布功能.
isColorInRange如果在画布可以获取像素之前触发canplay或play事件,该函数可以防止严重的背景更改.
重要的是,功能是在视频元素之前定义的.如果你在文档末尾加载javascript,因为它通常是由于页面加载性能而建议的,那么这种方法将无法工作.
- 我写了一篇文章并举了一个例子。感谢@feng 的基地！https://sansho.studio/blog/html-videos- Correct-background-color (4认同)
如果您的背景是纯黑色或白色，您只需在 css 中稍微增加对比度即可完全解决问题：
filter: contrast(101%);
最初的想法来自杰克。