'Remove black load flash on HTML5 video

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!

javascripthtmlcssgoogle-chromehtml5-video


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[3]

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();
});

Solution 4:[4]

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.

Solution 5:[5]

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

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

Solution 6:[6]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user
Solution 2 Duke Dougal
Solution 3 Darryl Mendonez
Solution 4 user3350623
Solution 5 user990967
Solution 6 generalp2

Related Questions