Видео выглядит немного ярче в Safari и Chrome, чем в Firefox

Question

Я пытаюсь установить небольшую часть видео на большем статичном фоне PNG, и края видео должны плавно смешаться с фоном, т.е. вы не сможете распознать, где заканчивается видео, и статическое изображение в фоновом режиме.

Тем не менее, я узнал, что каждый браузер делает видео цвета по-разному. В Chrome, это зависит добавить ли какие-либо свойства CSS фильтр (-webkit-фильтр), например

filter: saturate(100%) 

(который не должен изменять видео на всех). Я создал этот JSFiddle, чтобы продемонстрировать проблему https://jsfiddle.net/bj4hshwz/1/. Без него видео становится немного ярче. С свойством фильтра видео темнее/насыщеннее (и соответствует фону в моем случае). Firefox правильно отображает видео, и он соответствует фону и в Safari, всегда ярче, добавляете ли вы фильтр или нет.

Есть ли способ сделать видео в Safari также правильным?

Answer 1

Невозможно изменить рендеринг фильтра без ошибок. Вы должны сообщить об этом поставщику браузера. Ваш сокращенный тестовый пример будет полезен для исправления этого.

Кроме того, проблема связана с обработкой цветовых профилей в видео, и это немного беспорядок.

Изображения и цвета CSS в Интернете, как правило, устанавливаются в цветовом пространстве sRGB, но видео внутренне используют несколько других цветовых пространств, чаще всего Rec. 709 (для HD) и BT. 601 (старый SD-телевизор).

Проблема заключается в эти профили достаточно похожи, что много программного обеспечения, не заботится о преобразовании между ними, или преобразует неправильно (который так легко, потому что есть так много тонко несовместимые цветовые пространства называются «YUV») , Только когда вы пытаетесь точно сопоставить цвета (как и вы), ошибка становится заметной.

Rec 709 имеет гамма ~ 2.4 и sRGB имеет гамма ~ 2.2, поэтому программное обеспечение, которое не преобразуется точно между ними, будет слегка уменьшать яркость. Смешение 709/601 немного изменит оттенок.

Чтобы получить видео цвета соответствия CSS цвета точно все звезды должны совпадать:

1. Программное обеспечение, которое используется для создания видео необходимо прочитать цвета в SRGB и конвертировать их правильно в цветовое пространство видео (это, например, Rec 709.). Вероятно, это не произойдет, если вы не установите соответствующие флажки/флажки.
2. Информация о цветовом пространстве видео должна быть встроена в метаданные видеофайла, чтобы игроки не догадывались об этом. Некоторые игроки все равно будут угадывать (например, Firefox предполагает, что видео с низким разрешением не может использовать цветовое пространство HD).
3. Проигрыватель (браузер) должен понимать цветовые пространства видео и иметь возможность выбирать правильное цветовое пространство для видео.
4. Браузер должен воспроизводить видео с преобразованием цвета в цветовое пространство дисплея (последний раз, когда я проверял Firefox, этого не делал, если только вы не включили скрытую опцию вручную).
5. Браузеру необходимо преобразовать цвета CSS из sRGB, чтобы отображать цветовое пространство (или, в противном случае, оставить CSS-цвета в одиночку, но всегда конвертировать видео в sRGB). Chrome очень плохо в этом.

Вы можете рассчитывать на то, что Safari выполнит все это правильно, но в других браузерах он, как правило, безнадежно глючит. Подумайте о том, как изменить свой дизайн, чтобы скрыть расхождение?