Remove black load flash on HTML5 video
The Poster section of this blog post indicates the following:
"If you do not specify a poster image the browser may just display a black box filling the dimensions of the element."
So you can't seem to fix this by simply adding a background-color of white to the video element... but you can add a simple white poster image like so:
<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" > <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4"></video>
You can use transparent gif poster:
poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"But that wasn't enough to eliminate blinking in Firefox. I ended up by hiding the video until it's playing:
<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);">Adjust the timeout as you see fit. When not using autoplay, I had to increase it up to 400 ms.
I had the same problem and fixed it by hiding the video element using CSS display:none until the video element signalled it had finished loading via its onLoadedData event, and in response to that event I set display:block.
That got rid of the black flash.