Die Hintergrundfarbe des HTML5-Videos stimmt nicht mit der Hintergrundfarbe der Website überein – manchmal in einigen Browsern

Question 1

Ich habe ein Video, das der Kunde “nahtlos” in die Website einfügen möchte. Die HEX-Hintergrundfarbe des Videos stimmt mit der HEX-Hintergrundfarbe der Website überein und wird in manchen Browsern, manchen Versionen, zeitweise als solche gerendert?

Am merkwürdigsten ist, dass Chrome den Hintergrund des Videos anders rendert, bis Sie die Farbauswahl öffnen. Dann passen sie plötzlich zusammen. Um es klar zu sagen, es behebt es nur, wenn ich den Farbwähler öffne, nicht den Debugger (lesen Sie: Dies ist kein Neuzeichnungsproblem).

Firefox rendert anders, wenn ich zum ersten Mal auf die Website navigiere, aber wenn ich cmd + r drücke, wird es perfekt nahtlos.

Schauen Sie sich die Screenshots an – sie sagen mehr aus, als ich mit Worten sagen kann.

Ich bin gerade dabei, den Kunden davon zu überzeugen, für das Video auf weißen Hintergrund zu wechseln, da dies sicherlich “reparieren” wird, aber ich bin sehr neugierig, was / warum dies geschieht.

Irgendwelche Erkenntnisse von euch Zauberern da draußen?

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>

Question 2

Das Problem ist nicht nur browserabhängig, sondern renderabhängig. Sobald der Browser das Video mit Hardwarebeschleunigung rendert, wirken sich die GPU-Einstellungen auf die Farbe aus.

Wenn Sie beispielsweise eine Nvidia-Grafikkarte verwenden, können Sie die Farbeinstellungen in der Nvidia-Systemsteuerung ändern. Desktop-Monitore nutzen in der Regel den vollen RGB-Bereich aus 0 bis 255aber Sie können auch den eingeschränkten RGB-Bereich aus konfigurieren 16 bis 235. Die begrenzte Reichweite wird in der Regel von Fernsehern genutzt.

Einerseits stellen Grafikkartentreiber manchmal den Farbumfang von Desktop-Monitoren auf den eingeschränkten RGB-Bereich voreingestellt. Andererseits können Benutzer diesen Wert selbst ändern. Da Sie weder die Browsereinstellungen des Benutzers noch die Einstellungen des Grafikkartentreibers beeinflussen können, wird es immer Unterschiede zwischen verschiedenen Benutzern geben.

Wie werden die Farben beeinflusst:

Full RGB range -> limited RGB range
#000000 becomes #161616
#081F3C becomes #172A43
#FFFFFF becomes #EBEBEB

Hier ist mein Ansatz, um dieses Problem zu lösen:

Getestet habe ich es mit Chrome, Chrome auf Smartphone, Edge, Firefox und ~~InternetExplorer 11~~. Bearbeiten: Die Tests sind von 2017, aber wie in den Kommentaren von Jomal Johny erwähnt, funktioniert es nicht mehr in IE11. Nach einem Test kann ich bestätigen, dass es 2021 im IE11 nicht funktioniert.

Sobald das Video abspiel- oder abspielbereit ist, überprüfen Sie den ersten Pixel des Videos und ändern Sie die Hintergrundfarbe des umgebenden Containers entsprechend. Dies funktioniert unabhängig von den Browsereinstellungen und der Rendering-Konfiguration.

Dies ist der 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>

Das play Veranstaltung und setVideoBgColorDelayed Funktion sind für Browser wie Internet Explorer, die manchmal schon das auslösen canplay Ereignis, obwohl die Videodaten dem noch nicht zur Verfügung stehen drawImage Funktion der Leinwand.

Die Funktion isColorInRange verhindert harte Hintergrundänderungen, wenn die canplay oder play Ereignisse werden ausgelöst, bevor die Leinwand das Pixel abrufen kann.

Wichtig ist, dass die Funktionen vor dem Videoelement definiert werden. Wenn Sie das Javascript am Ende des Dokuments laden, wie es oft wegen der Seitenladegeschwindigkeit vorgeschlagen wird, funktioniert der Ansatz nicht.

Question 3

Es scheint, als wäre es grundlegend dafür, wie die Browser Videos rendern, und keine einfache CSS/HTML-Korrektur. Ihre Frage klingt ähnlich wie diese Frage. Ich wette, die Antwort liegt in einer Kombination von Rendering-Engines und Farbraumunterschieden, was bedeuten kann, dass es keine gute Möglichkeit gibt, das Problem browserübergreifend zu beheben.

Auf Firefox könnten Sie versuchen, mit den Farbmanagementeinstellungen herumzuspielen, um zu sehen, ob das das Verhalten ändert. Dies wird das Problem nicht beheben, aber es könnte helfen, es zu erklären. Geben Sie in der URL-/Suchleiste “about:config” ein. Es sollte Sie zu einer Optionsseite führen. Eine weitere Suchleiste wird auf der Seite gerendert angezeigt, geben Sie “gfx.color_management.mode” ein. Diese Option kann die Werte 0,1,2 annehmen. Versuchen Sie, sie hochzuschalten und die Seite neu zu laden (möglicherweise müssen Sie Firefox neu starten), um zu sehen, ob Sie einen konsistenten Unterschied erzielen können. Es ist jedoch möglich, dass es keinen Unterschied macht, wenn die Farbe überhaupt nicht verwaltet wird.

Ebenso könnten Sie versuchen, die hardwarebeschleunigte Videodekodierung in Chrome zu deaktivieren. Geben Sie „chrome://flags“ in die Chrome-URL/Suchleiste ein und suchen Sie dann das Flag „Hardwarebeschleunigte Videodecodierung deaktivieren“. Ändern Sie den Wert, starten Sie Chrome neu und überprüfen Sie die Farben erneut.

Keine dieser Lösungen ist mir klar, dies wäre vielleicht besser als Kommentar gedient worden, aber ich habe noch keinen Vertreter dafür.

Question 4

Exportieren von Videos und Bildern in sRGB oder Adobe RGB sollte dieses Problem lösen. Wir hatten ein Video mit Farbprofil HD (1-1-1)und das führte dazu, dass der Videohintergrund in Safari etwas heller war als in Chrome. Getestet auf macOS

Question 5

Wenn Ihr Hintergrund rein schwarz oder weiß ist, können Sie einfach den Kontrast in Ihrem CSS leicht erhöhen und das Problem wird vollständig gelöst:

filter: contrast(101%);

Ursprüngliche Idee von Jack.

Question 6

Exportieren Sie ein zweites Video, aber beschränken Sie es nur auf die Hintergrundfarbe Ihres Hauptvideos. Jetzt haben Sie also Ihr Originalvideo und ein zweites Video, das 1 Sekunde lang ist und nur eine flache Farbe hat.

Dieses Video-Tag sollte das folgende CSS haben:

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

und das Video-Tag kann sich oben in Ihrem Dokument befinden.

<body>
    <video id="bg-video" src="https://stackoverflow.com/questions/35214962/assets/bg.mp4" muted></video>
    <div>your main site html here</div>
</body>

Da beide Videos auf die gleiche Weise exportiert werden, sollten die Farben auch auf mehreren Browsern und/oder Betriebssystemen gleich wiedergegeben werden.

*Beachten Sie, dass Ihr „Hintergrundvideo“ mehr oder weniger quadratisch/rechteckig sein sollte, damit es beim Skalieren die Breite und Höhe des Browsers abdeckt.

Question 7

Ich denke, die richtige Lösung besteht darin, mit einem Greenscreen zu filmen (was Sie wahrscheinlich bereits getan haben) und zu verwenden

Transparentes Webm-Video bzw
Ersetzen Sie grüne Pixel durch transparente mit Javascript-Leinwand

Ein Beispiel für transparentes Video finden Sie hier:
https://jakearchibald.com/scratch/alphavid/

Question 8

Überprüfen Sie, ob dies funktioniert Demo.

Definieren Sie die Hintergrundfarbe für den Videocontainer als #e1dcd8;

oder ersetzen Sie Ihr vorhandenes CSS durch Folgendes:

 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%;
}