Почему в разных браузерах цвет отображается по разному?

Question

[zolope]

Есть анимация созданная в spline и записанная в mp4 с цветом фона #1e1e1e
Данное видео вставлено на сайт с
body: background: #1e1e1e
При проверки кроссбраузерности и кроссплатформенности на моих устройствах и в разных браузерах, всё отображается корректно:


однако у некоторых людей наблюдается вот такое, в частности в яндекс браузере на ноуте и сафари на маке:


Меняется цвет, то ли фона, то ли видео.

Comments

[Aetae]

От похожих проблем с PNG помогало удалить информацию о цветовом профиле из меты файла.
С видео всё намного сложнее, т.к. в ход идёт hardware acceleration и всевозможные твики и настройки в драйверах применяемые отдельно к видео. Но попробовать поискать инфу по конкретному использованному кодеку можно. Возможно стоит погуглить предпочтительные настройки кодирования и кодеки под web.

Гарантированным же решением вижу только не использовать сплошной фон, а использовать видео с прозрачным фоном.

P.S. Допускаю, что есть волшебная пилюля, но я о такой не слышал.

Cсылки которые могут помочь:
https://habr.com/ru/companies/vdsina/articles/560224/
https://css-tricks.com/overlaying-video-with-trans...

[DIVSIDE]

Дело не в видео. Точнее не только в нем. В 1й картинке скрин. На второй реальное фото с моника.
Просто на 2м у человека яркость сильная, вот и видно.

А проблема в видео с тем, что отрендерили не так.
Откройте фигму, сделайте скрин с видео и вставьте в фигму. Тыкните пипеткой и я более чем уверен что там не ##1e1e1e

Aetae

Гарантированным же решением вижу только не использовать сплошной фон, а использовать видео с прозрачным фоном.

Это плохое решение. Т.к не все браузеры до сих пор умеют webm адекватно воспроизводить, не говоря уже про альфу. + такое видео жнец сколько занимает.

[Aetae]

DIVSIDE, я, собсно, привел ссылки на статьи: первая расскажет, что работа с цветовыми профилями в разных браузерах(и не только) отличается. Т.е. в одном это #1e1e1e, а в другом не #1e1e1e(хотя, конечно, проверить не помешает); вторая расскажет как сделать прозрачное видео с кроссбраузерно.

zolope, ещё вариант если прозрачная часть видео статическая - можно просто наложить css mask. Ну и особый вариант, существовавший до появления видео с прозрачностью, - воспроизводить видео через canvas и руками там регулировать прозрачность.

[DIVSIDE]

Aetae, Да, браузеры видят цвета по-разному. Но это говорит лишь о том, что видео и фон в css - разные. А не одинаковые.
Будь это из-за браузера, он бы видел в другом браузере просто другой оттенок, а не 2 разных цвета. Так что дело в рендере видео.

[Aetae]

DIVSIDE, таки почитай статью. Пространство цветов видео и пространство цветов самой страницы - разные. В видео вообще нет никакого RGB, там YUV и то как браузер, система и драйвер преобразует YUV в RGB зависит от цветовых профилей и погоды на юпитере.

[DIVSIDE]

zolope Ну что?

[zolope]

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

Что странно, в большинстве случаев то все норм, у единиц только некорректное отображение + сегодня заметил, что у меня на телефоне тоже меняется цвет у видео, но только когда начинаешь сворачивать окно браузера