Firefox, Chrome, Safari ont fond gris pour MP4 HTML5 vidéo
toute vidéo (que je peux faire) avec un fond blanc devient grise dans Firefox, Chrome, et Safari (Il est blanc dans IE). Eh bien, sur ma machine Windows il est gris, sur mon téléphone/tablette Android et Mac il est blanc...
j'utilise ffmpeg pour encoder la vidéo. Si je l'encode comme webm, le fond est blanc.
<!-Voir: https://jsfiddle.net/Lbg8f6ck/j'ai trouvé un hack qui le corrige pour Chrome:
<video style="-webkit-filter:brightness(108.5%);"
Mais ça ne fonctionne pas pour Firefox ou Safari.
un Autre hack pour Firefox:
filter:brightness(1.085)
mais pour une raison quelconque, le configurer par JavaScript ne fonctionne pas.
<!-Il y a quelques versions, le fond était blanc pour le Chrome, puis est redevenu gris...la question est: pourquoi est gris blanc?
est-ce un problème avec la vidéo ou avec Chrome, Firefox, Safari en général? (Comment ne peuvent-ils pas soutenir les blancs?)
Est-il possible d'obtenir un blanc arrière-plan?
des piratages,des solutions?3 réponses
après une longue recherche et des tests voici une solution de travail
Solution:
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/
Démonstration De La Solution
.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>Problème Démonstration
<div class="brightness">
<video src="http://www.botlibre.com/media/a786628.mp4">
</video>
</div>Solutions De Rechange:
Essayez d'utiliser un autre lecteur vidéo html http://html5video.org/wiki/HTML5_Video_Player_Comparison
vous pouvez changer le fond de votre page en gris pour firefox etc. pour correspondre à votre vidéo
aussi si c'est juste les femmes qui parlent, vous pouvez utiliser l'animation gif avec audio
Capture Firefox:
Dans de nombreux cas, c'est un problème de drivers nVidia. Carte vidéo NVIDIA aux utilisateurs d'essayer le code suivant:
- ouvrir le Panneau de contrôle NVIDIA
- sous la rubrique "Vidéo", sélectionnez "Ajuster les paramètres de couleur vidéo"
- sous "Comment voulez-vous faire des réglages de couleur" select "Avec les paramètres NVIDIA"
- sous" Advanced "assurez-vous que" Dynamic Range "est"Complète (0-255)" pas "Limité (16-235)" ("rehaussement du contraste Dynamique" doit être unchecked)
dans mon cas cela a fonctionné, de toute façon je ne comprends pas pourquoi la portée dynamique pour la vidéo est limitée par défaut...
Voir ici: https://bugzilla.mozilla.org/show_bug.cgi?id=1138024
Chrome sera par défaut à un encodage vidéo différent en utilisant un codec vidéo open source HTML5.
Les autres navigateurs comme FireFox, Safari et IE utiliseront Flash par défaut.