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.

Answer 4

Putting in a poster attribute in the video tag did not stop the black box from flashing when the user refreshes the page however I used the hide function on the 'beforeunload' event and now the black flash is gone.

$(window).on('beforeunload', function() {
   $("video").hide();
});

Answer 5

I had the same blinking problem in Firefox, even with a poster attribute set. I fixed this by adding a background-image to the video tag that corresponded to the first frame of my video.

Answer 6

$(window).on('beforeunload', function() { $("video").hide(); });

This will hide the video element just before the window unloads and loads the next document.

Answer 7

I got rid of the flashing black box by adding style="background-color:white;"to the video element.