HTML5 vidéo couleur de fond ne correspondant pas à la couleur de fond du site web - dans certains navigateurs, parfois
j'ai une vidéo que le client veut asseoir" sans couture " dans le site. La couleur HEX de fond de la vidéo correspond à la couleur HEX de fond du site web, et rend en tant que tel dans certains navigateurs, certaines versions, certains du temps?
ce qui est le plus curieux, C'est que le Chrome rend le fond de la vidéo différemment, jusqu'à ce que vous ouvrez le picker de couleur. Puis subitement le match. Pour être clair, il fixe seulement une fois que j'ouvre le sélecteur de couleurs, pas le débogueur (lire: ce n'est pas une question de repeindre).
Firefox rend différemment quand j'ai naviguer sur le site, mais si je frappe cmd+r, il devient parfaitement transparent.
regardez les screenshots - ils en disent plus que moi avec les mots.
je suis en train de convaincre le client de passer au fond blanc pour la vidéo car cela va certainement la" corriger", mais je suis super curieux de savoir ce qui /pourquoi cela se produit.
des idées de vos magiciens?
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>
6 réponses
il semble comme il pourrait être fondamental à la façon dont les navigateurs rendent la vidéo, et pas un CSS/HTML facile correction. Votre question ressemble à cette question . Je parie que la réponse réside dans une combinaison de moteurs de rendu et de différences de coloris, ce qui peut signifier qu'il n'y a pas de bonne façon de le corriger à travers les navigateurs.
sur firefox, vous pouvez essayer de jouer avec les paramètres de gestion des couleurs pour voir si cela change le comportement. Cela ne résout pas le problème, mais cela pourrait aider à expliquer. Dans la barre de recherche/URL, entrez "about: config". Il devrait vous conduire à une page d'options. Une autre barre de recherche apparaîtra rendue dans la page, entrez "gfx.color_management.mode." Cette option peut prendre des valeurs 0,1,2. Essayez de les commuter et de recharger la page (peut-être besoin de redémarrer firefox) pour voir si vous pouvez obtenir une différence cohérente. Il est possible qu'il ne fera aucune différence si la couleur n'est pas géré en premier lieu.
De la même façon, vous pouvez essayer de désactiver le matériel de décodage vidéo accéléré dans chrome. Entrez "chrome: / / flags" dans la barre de recherche / URL de chrome, puis trouvez le drapeau "Matériel désactivé-décodage Vidéo Accéléré". Changez quelle que soit la valeur, redémarrez chrome, et vérifiez les couleurs à nouveau.
ce ne sont pas des solutions que je me rends compte, cela a peut-être été mieux servi comme commentaire, mais je n'ai pas encore le représentant pour cela.
la question n'est pas uniquement dépendante du navigateur, mais rend dépendante. Dès que le navigateur affiche la vidéo avec une accélération matérielle, les préférences GPU affectent la couleur.
Par exemple, si vous utilisez une carte graphique Nvidia, vous pouvez modifier les préférences de couleur dans le Panneau de Contrôle Nvidia. Les moniteurs de bureau utilisent généralement la gamme complète de RVB de 0 à 255 , mais vous pouvez également configurer la gamme limitée de RVB de 16 à 235 . La portée limitée est généralement utilisée par les téléviseurs.
d'une part, les pilotes de carte graphique par défaut parfois la gamme de couleurs des moniteurs de bureau à la gamme RGB limitée. D'un autre côté, les utilisateurs peuvent changer cette valeur eux-mêmes. Puisque vous ne pouvez pas influencer les paramètres du navigateur de l'utilisateur ni les paramètres du pilote de carte graphique, il y aura toujours des différences pour les utilisateurs distincts.
comment sont les couleurs affectées:
Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB
Voici mon approche pour résoudre ce problème:
Je l'ai testé avec Chrome, Chrome sur Smartphone, Edge, Firefox et Internet Explorer 11.
dès que la vidéo est prête à être jouée ou reprise, vérifiez le premier pixel de la vidéo et changez la couleur de fond du conteneur environnant en conséquence. Cela fonctionne indépendamment des paramètres du navigateur et de la configuration du rendu.
c'est le code:
<!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>
l'événement play et la fonction setVideoBgColorDelayed sont pour les navigateurs comme Internet Explorer, qui parfois tirent déjà l'événement canplay , bien que les données vidéo ne sont pas encore disponibles à la fonction drawImage de la toile.
la fonction isColorInRange empêche les changements de fond difficiles, si les événements canplay ou play sont tirés avant que la toile puisse obtenir le pixel.
il est important, que les fonctions sont définies avant l'élément vidéo. Si vous chargez le javascript à la fin du document, comme il est souvent suggéré en raison de la performance de chargement de la page, alors l'approche ne fonctionnera pas.
exporter des vidéos et des images dans sRGB ou Adobe RGB devrait résoudre ce problème. Nous avons eu une vidéo avec le profil de collor HD (1-1-1) , et cela a causé arrière-plan vidéo d'être légèrement plus léger en Safari que dans Chrome. testé sur macOS
Check ce travail démo .
définit la couleur de fond pour le conteneur vidéo comme # e1dcd8;
ou remplacer votre NSC existant par ce qui suit:
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%;
}
je pense que la bonne solution ici est de filmer en utilisant un écran vert (ce que vous avez probablement déjà fait) et utiliser
- transparent webm video or
- remplacer les pixels verts par des pixels transparents en utilisant javascript canvas
un exemple de vidéo transparente peut être trouvé ici: https://jakearchibald.com/scratch/alphavid/