web-dev-qa-db-fra.com

La couleur d'arrière-plan de la vidéo HTML5 ne correspond pas à la couleur d'arrière-plan du site Web - dans certains navigateurs, parfois

J'ai une vidéo que le client veut s'asseoir "de manière transparente" sur le site. La couleur HEX d'arrière-plan de la vidéo correspond à la couleur d'arrière-plan HEX du site Web et s'affiche telle quelle dans certains navigateurs, dans certaines versions, parfois.

Le plus curieux, c'est que Chrome rend l'arrière-plan de la vidéo différemment, jusqu'à ce que vous ouvriez le sélecteur de couleur. Puis ils correspondent tout à coup. Pour être clair, cela ne se corrige que lorsque j'ouvre le sélecteur de couleur, pas le débogueur (lisez: ceci n'est pas un problème de repeinte). 

Firefox affiche le rendu différemment lorsque je navigue pour la première fois sur le site, mais si je tape sur cmd + r, cela devient parfaitement transparent.

Regardez les captures d'écran - elles en disent plus que moi avec des mots.

Je suis en train de convaincre le client de passer à un fond blanc pour la vidéo, car cela "le réparera" certainement, mais je suis vraiment curieux de savoir ce qui se passe et pourquoi.

Avez-vous 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>

 Screenshots of the different browsers.

csshtml5videohtml5-videobackground-color
21
tayvano

Il semble que cela puisse être fondamental pour la manière dont les navigateurs rendent la vidéo, et non un correctif CSS/HTML simple. Votre question ressemble à cette question . Je parie que la réponse réside dans une combinaison de moteurs de rendu et de différences d'espace colorimétrique, ce qui peut signifier qu'il n'y a pas de moyen efficace de le résoudre sur les navigateurs.

Sur Firefox, vous pouvez essayer de manipuler les paramètres de gestion des couleurs pour voir si cela change le comportement. Cela ne résoudra pas le problème, mais cela pourrait aider à l'expliquer. Dans l'URL/barre de recherche, entrez "about: config". Cela devrait vous mener à une page d’options. Une autre barre de recherche apparaîtra dans la page, entrez "gfx.color_management.mode". Cette option peut prendre des valeurs 0,1,2. Essayez de les changer et de recharger la page (il peut être nécessaire de redémarrer Firefox) pour voir si vous pouvez obtenir une différence cohérente. Il est toutefois possible que cela ne fasse aucune différence si la couleur n'est pas gérée en premier lieu.

De même, vous pouvez essayer de désactiver le décodage vidéo à accélération matérielle en chrome. Entrez "chrome: // flags" dans l'URL/barre de recherche de chrome, puis recherchez le drapeau "Désactiver le décodage vidéo à accélération matérielle". Modifiez la valeur, redémarrez chrome et vérifiez à nouveau les couleurs.

Je me rends compte que ni l'une ni l'autre de ces solutions ne servaient de commentaire, mais je n'ai pas encore de représentant pour le moment.

8
Jeremy Watson

Le problème ne dépend pas uniquement du navigateur, mais du rendu. Dès que le navigateur rend la vidéo avec une accélération matérielle, les préférences du processeur graphique 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 configuration Nvidia. Les moniteurs de bureau utilisent généralement la plage RVB complète de 0 à 255 , mais vous pouvez également configurer la plage RVB limitée de 16 à 235 . La gamme limitée est généralement utilisée par les téléviseurs.

D'une part, les pilotes de carte graphique définissent parfois la plage de couleurs des moniteurs de bureau sur la plage RVB limitée. D'un autre côté, les utilisateurs peuvent modifier cette valeur eux-mêmes… .. Étant donné que vous ne pouvez pas influencer les paramètres du navigateur de l'utilisateur ni les paramètres du pilote de la carte graphique, il y aura toujours des différences pour des utilisateurs distincts.

Comment les couleurs sont-elles 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 lue ou lue, vérifiez le premier pixel de la vidéo et modifiez la couleur d'arrière-plan du conteneur environnant en conséquence. Cela fonctionnera quels que soient les paramètres du navigateur et 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 destinés à des navigateurs tels qu'Internet Explorer, qui déclenchent parfois déjà l'événement canplay, bien que les données vidéo ne soient pas encore disponibles pour la fonction drawImage de la grille.

La fonction isColorInRange empêche les modifications d’arrière-plan brusques si les événements canplay ou play sont déclenchés avant que la grille ne puisse obtenir le pixel.

Il est important que les fonctions soient définies avant l'élément video . Si vous chargez le code javascript à la fin du document, comme cela est souvent suggéré en raison des performances de chargement de la page, l'approche ne fonctionnera pas.

7
feng

L'exportation de vidéos et d'images dans sRGB ou Adobe RGB devrait résoudre ce problème. Nous avions une vidéo avec le profil de collor HD (1-1-1), ce qui atténuait légèrement l’arrière-plan vidéo dans Safari par rapport à Chrome. Testé sur macOS

3
Mladen Janjetovic

Vérifiez que cela fonctionne demo .

Définissez la couleur d'arrière-plan du conteneur vidéo sous la forme # e1dcd8;

ou remplacez votre css existant par le suivant:

 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%;
}
0
Arun Sharma

Je pense que la bonne solution est de filmer avec un écran vert (ce que vous avez probablement déjà fait) et d’utiliser

  1. Vidéo webm transparente ou
  2. Remplacez les pixels verts par des transparents à l'aide de la toile javascript

Un exemple de vidéo transparente peut être trouvé ici: https://jakearchibald.com/scratch/alphavid/

0
Thomas

Si votre arrière-plan est noir ou blanc pur, vous pouvez simplement augmenter légèrement le contraste dans votre css et le problème sera entièrement résolu:

-webkit-filter: contrast(101%);
filter: contrast(101%);

Idée originale de Jack .

0
David

Exportez une seconde vidéo mais limitez-la uniquement à la couleur d'arrière-plan de votre vidéo principale. Alors maintenant, vous avez votre vidéo originale, et une seconde vidéo qui dure 1 seconde et est juste une couleur plate.

Cette balise video devrait avoir le css suivant:

#bg-video {
    position: fixed;
    width: 100vw;
    z-index: -1;
}

et la balise video peut être en haut de votre document.

<body>
    <video id="bg-video" src="assets/bg.mp4" muted></video>
    <div>your main site html here</div>
</body>

Étant donné que les deux vidéos sont exportées de la même manière, les couleurs doivent également être rendues de la même manière sur plusieurs navigateurs et/ou systèmes d'exploitation.

* Notez que votre "vidéo d'arrière-plan" doit être plus ou moins un carré/rectangle afin que, lorsqu'elle est mise à l'échelle, elle couvre la largeur et la hauteur du navigateur.

0
Matt