HTML 5 video - backup image always loaded
I'm using an HTML5 HTML tag with an image tag inside as a fallback for browsers that don't support it (IE8 for example).
The code looks like this:
<video loop="loop" preload="auto">
<source src="/videos/home-slider-1.mp4" type="video/mp4">
<img src="/images/png-jpg/home-slide-1.jpg" width="100%">
</video>
The fallback image works as desired, it does not display in modern browsers that support video tagging. But it shows in IE8, no problem.
However, when I look in Chrome or Firefox what is loaded on page load with this code, it shows that it also loads fallback images ... I don't understand why this is a waste.
Am I doing something wrong here? Should I use a different way to provide a fallback image? Does this issue exist for other HTML5 backups as well?
source to share
browsers load all the assets in the document, so what you see is normal. you didn’t do anything wrong, on the contrary, most people don’t implement the reserve, so in fact you went above and beyond and do the right thing.
if you are worried about it, I suppose you could load the load by reloading the image, but I think this is really extreme. unless you are sucking tons of assets into your documents and your download speeds are very detrimental, I won't even bother with that.
source to share