wake-up-neo.com

HTML5-Video-Hintergrundfarbe stimmt nicht mit der Hintergrundfarbe einer Website überein - in manchen Browsern manchmal

Ich habe ein Video, das der Kunde "nahtlos" in die Website setzen möchte. Die Hintergrund-HEX-Farbe des Videos stimmt mit der HEX-Hintergrundfarbe der Website überein und wird in einigen Browsern als solche dargestellt, in einigen Versionen zum Teil?

Am interessantesten ist, dass Chrome den Hintergrund des Videos anders darstellt, bis Sie die Farbauswahl öffnen. Dann passen sie plötzlich zusammen. Um es klar zu machen, behebt es dies nur, wenn ich den Farbwähler nicht den Debugger öffne (lesen Sie: dies ist kein Problem beim Neulichen). 

Firefox rendert anders, wenn ich zum ersten Mal zur Site navigiere, aber wenn ich cmd + r drücke, wird es vollkommen nahtlos.

Schauen Sie sich die Screenshots an - sie sagen mehr als ich mit Worten kann.

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

Irgendwelche Erkenntnisse von Ihren 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>

 Screenshots of the different browsers.

21
tayvano

Es scheint, dass es von grundlegender Bedeutung für die Wiedergabe von Videos durch die Browser sein könnte und nicht für eine einfache CSS/HTML-Korrektur. Ihre Frage klingt ähnlich wie diese Frage . Ich wette, die Antwort liegt in einer Kombination von Rendering-Engines und Farbraumunterschieden. Dies kann bedeuten, dass es keine gute Möglichkeit gibt, sie in Browsern zu beheben.

Auf Firefox können Sie versuchen, mit den Farbverwaltungseinstellungen herumzuspielen, um zu sehen, ob sich dadurch das Verhalten ändert. Das 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 angezeigt. Geben Sie "gfx.color_management.mode" ein. Diese Option kann Werte von 0,1,2 annehmen. Wechseln Sie die Seite und laden Sie die Seite neu (möglicherweise muss Firefox erneut gestartet werden), um zu sehen, ob Sie einen konsistenten Unterschied feststellen können. Es ist möglich, dass es keinen Unterschied macht, wenn die Farbe überhaupt nicht verwaltet wird.

In ähnlicher Weise 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 Videodecode deaktivieren". Ändern Sie den Wert, starten Sie Chrome neu und überprüfen Sie die Farben erneut.

Keine dieser Lösungen ist mir bekannt, das war vielleicht besser als Kommentar, aber ich habe noch keinen Vertreter dafür.

8
Jeremy Watson

Das Problem ist nicht nur vom Browser abhängig, sondern vom Render abhängig. Sobald der Browser das Video mit Hardwarebeschleunigung wiedergibt, wirken sich die GPU-Voreinstellungen auf die Farbe aus.

Wenn Sie beispielsweise eine Nvidia-Grafikkarte verwenden, können Sie die Farbeinstellungen in der Nvidia-Systemsteuerung ändern. Desktop-Monitore verwenden normalerweise den gesamten RGB-Bereich von 0 bis 255 , Sie können jedoch auch den begrenzten RGB-Bereich von 16 bis 235 konfigurieren. Die begrenzte Reichweite wird im Allgemeinen von Fernsehgeräten verwendet.

Einerseits setzen Grafikkartentreiber den Farbbereich von Desktop-Monitoren manchmal auf den begrenzten RGB-Bereich. Andererseits können Benutzer diesen Wert selbst ändern. Da Sie weder die Browsereinstellungen des Benutzers noch die Grafikkartentreibereinstellungen beeinflussen können, gibt es für verschiedene Benutzer immer Unterschiede.

Wie sind die Farben betroffen:

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:

Ich habe es mit Chrome, Chrome auf Smartphone, Edge, Firefox und Internet Explorer 11 getestet.

Sobald das Video zur Wiedergabe oder Wiedergabe bereit ist, überprüfen Sie das erste Pixel des Videos und ändern Sie die Hintergrundfarbe des umgebenden Containers entsprechend. Dies funktioniert unabhängig von Browsereinstellungen und 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-Ereignis und die setVideoBgColorDelayed-Funktion sind für Browser wie Internet Explorer gedacht, die manchmal bereits das canplay-Ereignis auslösen, obwohl die Videodaten für die drawImage-Funktion der Zeichenfläche noch nicht verfügbar sind.

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

Es ist wichtig, dass die Funktionen vor dem Videoelement definiert sind. Wenn Sie das Javascript am Ende des Dokuments laden, wie dies häufig aufgrund der Seitenladeleistung vorgeschlagen wird, funktioniert der Ansatz nicht.

7
feng

Das Exportieren von Videos und Bildern in sRGB oder Adobe RGB sollte dieses Problem beheben. Wir hatten ein Video mit dem Collor-Profil HD (1-1-1), was dazu führte, dass der Videohintergrund in Safari etwas heller wurde als in Chrome. Auf macOS getestet

3

Überprüfen Sie diese funktionierende Demo .

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

oder ersetzen Sie Ihre vorhandene 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%;
}
0
Arun Sharma

Ich denke, die richtige Lösung ist, mit einem grünen Bildschirm zu filmen (was Sie wahrscheinlich bereits getan haben) und zu verwenden

  1. Transparentes Webm-Video oder
  2. Ersetzen Sie grüne Pixel durch transparente mit Hilfe von Javascript Canvas

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

0
Thomas

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

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

Ursprüngliche Idee von Jack .

0
David

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

Dieses Video-Tag sollte die folgende CSS haben:

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

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

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

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

* Beachten Sie, dass Ihr "Hintergrundvideo" mehr oder weniger ein Quadrat/Rechteck sein sollte, damit es bei der Skalierung die Breite und Höhe des Browsers abdeckt.

0
Matt