css - negro - colores html
El color de fondo del video HTML5 no coincide con el color de fondo del sitio web-en algunos navegadores, a veces (7)
Tengo un video que el cliente quiere sentarse "a la perfección" en el sitio web. El color de fondo HEX del video coincide con el color de fondo HEX del sitio web, y se procesa como tal en algunos navegadores, algunas versiones, algunas veces.
Lo más curioso es que Chrome reproduce el fondo del video de manera diferente, hasta que abres el selector de color. Entonces de repente coinciden. Para que quede claro, solo lo arregla una vez que abro el selector de color, no el depurador (lea: esto no es un problema de repintado).
Firefox se ejecuta de manera diferente cuando navego por primera vez al sitio, pero si presiono cmd + r, se vuelve perfectamente transparente.
Eche un vistazo a las capturas de pantalla: dicen más de lo que puedo con palabras.
Estoy en el proceso de convencer al cliente para que cambie al fondo blanco para el video, ya que eso seguramente lo "arreglará", pero tengo mucha curiosidad sobre qué / por qué está sucediendo esto.
¿Alguna idea de ustedes magos por ahí?
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>
Compruebe esta demo trabajo.
Defina el color de fondo para el contenedor de video como # e1dcd8;
o reemplace su css existente con lo siguiente:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.background {
background-color: #e1dcd8;
width: 100%;
height: 100%;
}
.video-container{
background: #e1dcd8;
}
video {
margin-left: 5%;
margin-top: 5%;
}
El problema no depende únicamente del navegador, sino de la representación. Tan pronto como el navegador reproduce el video con aceleración de hardware, las preferencias de la GPU afectan el color.
Por ejemplo, si está utilizando una tarjeta gráfica Nvidia, puede cambiar las preferencias de color en el Panel de control de Nvidia. Los monitores de escritorio usualmente usan el rango completo de RGB de 0 a 255 , pero también puede configurar el rango limitado de RGB de 16 a 235 . El rango limitado es generalmente utilizado por los televisores.
Por un lado, los controladores de tarjetas gráficas a veces predeterminan el rango de colores de los monitores de escritorio al rango RGB limitado. Por otro lado, los usuarios pueden cambiar este valor ellos mismos. Como no puede influir en la configuración del navegador del usuario ni en la configuración del controlador de la tarjeta gráfica, siempre habrá diferencias para los distintos usuarios.
¿Cómo se ven afectados los colores?
Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB
Aquí está mi enfoque para resolver este problema:
Lo he probado con Chrome, Chrome en Smartphone, Edge, Firefox e Internet Explorer 11.
Tan pronto como el video esté listo para reproducirse, verifique el primer píxel del video y cambie el color de fondo del contenedor que lo rodea. Esto funcionará independientemente de la configuración del navegador y la configuración de representación.
Este es el código:
<!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>
El evento de play y la función setVideoBgColorDelayed son para navegadores como Internet Explorer, que a veces ya canplay evento canplay , aunque los datos de video aún no están disponibles para la función drawImage del lienzo.
La función isColorInRange evita cambios bruscos de fondo, si los eventos de play o play canplay antes de que el lienzo pueda obtener el píxel.
Es importante que las funciones se definan antes del elemento de video. Si carga el javascript al final del documento, como a menudo se sugiere debido al rendimiento de carga de la página, el enfoque no funcionará.
Exporta un segundo video, pero limítalo solo al color de fondo que tienes en tu video principal. Así que ahora tiene su video original y un segundo video que tiene 1 segundo de duración y es solo un color plano.
Esa etiqueta de video debe tener el siguiente css:
#bg-video {
position: fixed;
width: 100vw;
z-index: -1;
}
y la etiqueta de video puede estar en la parte superior de su documento.
<body>
<video id="bg-video" src="assets/bg.mp4" muted></video>
<div>your main site html here</div>
</body>
Dado que ambos videos se exportan de la misma manera, los colores también deben representarse de la misma forma en múltiples navegadores y / o sistemas operativos.
* Tenga en cuenta que su ''video de fondo'' debe ser más o menos un cuadrado / rectángulo para que cuando se amplíe, cubra el ancho y la altura de los navegadores.
Exportar videos e imágenes en sRGB o Adobe RGB debería resolver este problema. Tuvimos un video con el perfil de color de HD (1-1-1) , y eso causaba que el fondo del video se aclare levemente en Safari que en Chrome. Probado en macOS
Parece que podría ser fundamental para la forma en que los navegadores renderizan el video, y no es una solución fácil de CSS / HTML. Su pregunta suena similar a esta pregunta . Estoy apostando a que la respuesta se encuentra en una combinación de motores de representación y diferencias de espacio de color, lo que puede significar que no hay una buena manera de solucionarlo en los navegadores.
En Firefox, puedes intentar jugar con la configuración de la administración del color para ver si eso cambia el comportamiento. Esto no solucionará el problema, pero podría ayudar a explicarlo. En la barra de URL / búsqueda, ingrese "about: config". Debería llevarte a una página de opciones. Aparecerá otra barra de búsqueda renderizada en la página, ingrese "gfx.color_management.mode". Esa opción puede tomar valores 0,1,2. Intente cambiarlos y volver a cargar la página (puede que tenga que reiniciar Firefox) para ver si puede obtener una diferencia constante. Es posible que no haga ninguna diferencia si el color no se está administrando en primer lugar.
Del mismo modo, puedes intentar deshabilitar la decodificación de video acelerada por hardware en Chrome. Ingrese "chrome: // flags" en la barra de búsqueda / URL de chrome, luego encuentre la marca "Deshabilitar la descodificación de video acelerada por hardware". Cambie el valor que sea, reinicie Chrome y vuelva a comprobar los colores.
Ninguna de estas son soluciones, me doy cuenta de que esto podría haber servido mejor como un comentario, pero todavía no tengo el representante para eso.
Si su fondo es negro o blanco puro, simplemente puede aumentar ligeramente el contraste en su css y el problema se resolverá completamente:
-webkit-filter: contrast(101%);
filter: contrast(101%);
Idea original de Jack .
Siento que la solución adecuada aquí es filmar usando una pantalla verde (lo que probablemente ya hiciste) y usar
- Video webm transparente o
- Reemplace los píxeles verdes por los transparentes usando lienzo javascript
Puede encontrar un ejemplo de video transparente aquí: https://jakearchibald.com/scratch/alphavid/