Firefox, Chrome, Safari имеют серый фон для видео MP4 HTML5

Любое видео (которое я могу сделать) с белым фоном становится серым в Firefox, Chrome и Safari (оно белое в IE). Ну, на моей машине с Windows это серый цвет, на моем телефоне/планшете Android и Mac это белый цвет...

Я использую ffmpeg для кодирования видео. Если я закодирую его как webm, фон будет белым.

Смотрите: https://jsfiddle.net/Lbg8f6ck/

Я нашел хак, который исправляет его для Chrome:

<video style="-webkit-filter:brightness(108.5%);"

Но это не работает для Firefox или Safari.

Еще один взлом для Firefox:

filter:brightness(1.085)

Но по какой-то причине установка его с помощью JavaScript не работает.

Несколько версий назад фон был белым для Chrome, а затем снова стал серым...

Возникает вопрос: почему белый серый?

Это проблема с видео или с Chrome, Firefox, Safari в целом? (Как они могут не поддерживать белый?)

Можно ли получить белый фон?

Любые хаки, обходные пути?

Ответ 1

После долгого поиска и тестирования здесь находится рабочее решение

Решение:

CSS

.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

HTML

<div class="brightness">
<video src="http://www.botlibre.com/media/a786628.mp4">
</video>
</div>

https://jsfiddle.net/27L5nvg4/1/

Демонстрация решений

.brightness{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'brightness\'><feColorMatrix type=\'matrix\' values=\'1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0 0 0 0 0 1.2 0\'/></filter></svg>#brightness"); /* Firefox 3.5+ */
    -webkit-filter:brightness(108.5%); /* Chrome 19+ & Safari 6+ */
}

<div class="brightness">
<video src="http://www.botlibre.com/media/a786628.mp4">
</video>
</div>

Ответ 2

Во многих случаях это проблема драйверов nVidia. Пользователи видеокарты NVIDIA пытаются выполнить следующие действия:

откройте панель управления NVIDIA
в разделе "Видео" выберите "Настроить параметры цвета видео"
в разделе "Как настроить цвет" выберите "С настройками NVIDIA"
в разделе "Дополнительно" убедитесь, что "Динамический диапазон" " Полный (0-255)" не "Ограниченный (16-235)" ( "Ускорение динамического контраста" должно быть снято)

В моем случае это сработало, так или иначе я не понимаю, почему динамический диапазон для видео ограничен по умолчанию...

Смотрите здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=1138024

Ответ 3

Chrome по умолчанию будет использовать другую кодировку видео с помощью кодека HTML5 с открытым исходным кодом.
Другие браузеры, такие как FireFox, Safari и IE, по умолчанию будут использовать Flash.