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

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

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

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

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

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

любые идеи от вас wizards out там?

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.

20
background-color css html5 html5-video video

6 ответов

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

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

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

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

7

проблема не только зависит от браузера, но и зависит от рендеринга. Как только браузер отображает видео с аппаратным ускорением, настройки 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 в конце документа, как это часто предлагается, потому что производительности загрузки страницы, то подход не будет работать.

6

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

3

проверка этой работы демо.

определите цвет фона для видео контейнера как #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%;
}
0

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

  1. транспарант webm видео или
  2. замените зеленые пиксели транспарантными, используя JavaScript canvas

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

0

Если ваш фон чисто черный или белый, вы можете просто немного увеличить контраст в вашем css, и проблема будет полностью решена:

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

оригинальная идея от Джек.

0