Remove black load flash on HTML5 video

Question

I have been creating a website for an online game that I play. In the header I have a HTML5 video that plays very briefly (1second). In Internet Explorer there is no issue, however in Chrome as the video is loading there is a very brief flash of black screen. Is there any way that I can remove this flash, or, failing that, make it white to match the background? You can see what I mean here http://testingfortagpro.meximas.com/ . If you try it in IE and the Chrome you will see the difference in how the video loads. Alternatively is there any better way of implementing this? I have tried using a animated GIF however quality is significantly reduced.

Thanks!

Answer 1

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>

Answer 2

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.

Answer 3

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.