Цвет фона HTML5 не соответствует цвету фона веб-сайта - в некоторых браузерах, иногда

У меня есть видео, которое клиент хочет сидеть "без проблем" на веб-сайте. Фоновый цвет HEX видео соответствует цвету фона HEX на веб-сайте и отображает как таковой в некоторых браузерах, некоторые версии, некоторые из них?

Что наиболее любопытно, Chrome отображает фоновое изображение по-разному, пока не откроется панель выбора цвета. Затем они внезапно совпадают. Чтобы быть ясным, он исправляет его только после того, как я открою подборщик цветов, а не отладчик (читайте: это не проблема перекраски).

Firefox делает по-разному, когда я впервые перейду на сайт, но если я нажму cmd + r, он станет совершенно бесшовным.

Взгляните на скриншоты - они говорят больше, чем я могу со словами.

Я пытаюсь убедить клиента перейти на белый фон для видео, поскольку это, безусловно, "исправит" его, но мне очень любопытно, что/почему это происходит.

Любые идеи от вас волшебников там?

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>

Ответ 1

Похоже, что это может быть основополагающим для того, как браузеры визуализируют видео, а не простое исправление CSS/HTML. Ваш вопрос похож на этот вопрос. Я уверен, что ответ кроется в некоторой комбинации движков рендеринга и цветовых различий, что может означать, что нет хорошего способа исправить его в браузерах.

В firefox вы можете попробовать играть с настройками управления цветом, чтобы увидеть, изменило ли это поведение. Это не решит проблему, но это поможет объяснить ее. В строке URL/поиска введите "about: config". Он должен перейти на страницу параметров. На странице появится другая строка поиска, введите "gfx.color_management.mode". Эта опция может принимать значения 0,1,2. Попробуйте переключить их и перезагрузите страницу (возможно, потребуется перезапустить firefox), чтобы увидеть, можете ли вы получить постоянную разницу. Возможно, это не будет иметь никакого значения, если цвет не управляется в первую очередь, хотя.

Аналогично, вы можете попробовать отключить аппаратное ускорение декодирования видео в хром. Введите "chrome://flags" в chrome URL/search bar, затем найдите флаг "Disable аппаратное ускорение видео декодирования". Измените любое значение, перезапустите хром и снова проверьте цвета.

Ни то, ни другое не являются решениями, которые я понимаю, это, возможно, лучше служило комментарием, но пока у меня нет репутации.

Ответ 2

Проблема не зависит только от браузера, а зависит от зависимостей. Как только браузер отобразит видео с аппаратным ускорением, предпочтения GPU влияют на цвет.

Например, если вы используете графическую карту Nvidia, вы можете изменить цветовые настройки в панели управления Nvidia. Настольные мониторы обычно используют полный диапазон RGB от от 0 до 255, но вы также можете настроить ограниченный диапазон RGB от от 16 до 235. Ограниченный диапазон обычно используется телевизорами.

С одной стороны, драйверы графических карт иногда используют диапазон цветов настольных мониторов для ограниченного диапазона RGB. С другой стороны, пользователи могут сами изменить это значение. Поскольку вы не можете влиять на настройки браузера пользователя и параметры драйвера графической карты, всегда будут различия для разных пользователей.

Как влияют цвета:

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

Вот мой подход к решению этой проблемы:

Я тестировал его с помощью Chrome, Chrome на смартфоне, Edge, Firefox и Internet Explorer 11.

Как только видео будет готово к воспроизведению или воспроизведению, проверьте первый пиксель видео и соответствующим образом измените цвет фона окружающего контейнера. Это будет работать независимо от настроек браузера и конфигурации рендеринга.

Это код:

<!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>

Функция play и setVideoBgColorDelayed предназначены для браузеров, таких как Internet Explorer, которые иногда уже запускают событие canplay, хотя видеоданные еще недоступны для функции drawImage на холсте.

Функция isColorInRange предотвращает резкие изменения фона, если события canplay или play запускаются до того, как холст может получить пиксель.

Важно, чтобы функции были определены перед элементом видео. Если вы загрузите javascript в конце документа, так как это часто предлагается из-за производительности загрузки страницы, то подход не будет работать.

Ответ 3

Экспорт видео и изображений в sRGB или Adobe RGB должен устранить эту проблему. У нас было видео с профилем с коллоном HD (1-1-1), и это приводило к тому, что фоновый фон немного улучшался в Safari, чем в Chrome. Протестировано на macOS

Ответ 4

Проверьте эту рабочую демонстрацию.

Определить цвет фона для видеоконтента как # e1dcd8;

или замените существующий css следующим образом:

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

Ответ 5

Я считаю, что правильное решение здесь - это фильм с использованием зеленого экрана (который вы, вероятно, уже сделали), и используйте

Прозрачный веб-видеоролик или
Замените зеленые пиксели прозрачными, используя холст javascript.

Пример прозрачного видео можно найти здесь: https://jakearchibald.com/scratch/alphavid/