Firefox, Chrome, Safari hanno sfondo grigio per video HTML5 MP4

Question

Qualsiasi video (che posso fare) con uno sfondo bianco diventa grigio in Firefox, Chrome e Safari (è bianco in IE). Bene, sul mio computer Windows è grigio, sul mio telefono/tablet Android e Mac è bianco ...

Sto usando ffmpeg per codificare il video. Se lo codifico come webm, lo sfondo è bianco.

Vedi: https://jsfiddle.net/Lbg8f6ck/

Ho trovato un hack che la fissa per Chrome:

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

Ma non funziona per Firefox o Safari.

Un altro hack per Firefox:

filter:brightness(1.085) 

Ma per qualche impostazione attraverso JavaScript non funziona ragione.

alcune versioni fa, lo sfondo era bianco per Chrome, quindi è diventato grigio di nuovo ...

La domanda è: perché è grigio bianco?

Si tratta di un problema con il video o con Chrome, Firefox, Safari in generale? (Come possono non supportare il bianco?)

È possibile ottenere uno sfondo bianco?

Qualsiasi hack, soluzioni alternative?

Answer 1

Chrome utilizzerà una codifica video diversa utilizzando un codec video HTML5 open source.
Gli altri browser come FireFox, Safari e IE utilizzeranno automaticamente Flash.

Answer 2

Dopo una lunga ricerca e di test qui è una soluzione di lavoro

Soluzione:

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/

---

Soluzione Dimostrazione

.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>

---

Problema Dimostrazione Soluzioni alternative

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

---

alternativi:

Prova ad utilizzare un altro lettore video html http://html5video.org/wiki/HTML5_Video_Player_Comparison

È possibile cambiare pagina di sfondo grigio per Firefox ecc per abbinare il vostro video

Anche se è solo le donne a parlare è possibile utilizzare l'animazione gif con audio

Capture Firefox:

http://i.stack.imgur.com/tWWqm.jpg

Answer 3

In molti casi si tratta di un problema di driver nVidia. utenti scheda video NVIDIA provare quanto segue:

1. aprire il pannello di controllo NVIDIA
2. nella sezione "Video" selezionare “Regolare le impostazioni di colore video”
3. in "Come si fa a fare regolazioni di colore" selezionare “Con il impostazioni NVIDIA”
4. voce "Avanzate" assicurarsi "Gamma dinamica" è‘completa (0-255)’non‘Limited (16-235)’(‘Dynamic contrast enhancement’deve essere deselezionata)

Nel mio caso ha funzionato, in ogni caso non capisco il motivo per cui gamma dinamica per il video è limitata per default ...

Vedi qui: https://bugzilla.mozilla.org/show_bug.cgi?id=1138024