Html5 Fallback Images Are Being Loaded By The Browser, Even Though Html5 Video Is Supported

I have some HTML5 videos with animated GIFs as fallback. Sadly, the GIFs are being loaded even though HTML5 video is supported. Without using javascript, is there a way to stop the

Solution 1:

I never found an answer to this, so I simply changed src to data-src on the fallback GIFs, and if IE8 or earlier was detected I changed it back to src using javascript.

Solution 2:

I assume you want a fallback for IE8 and earlier. Your solution is valid HTML, but I haven't seen anyone else recommend it. Other people use <p>Your Message Here</p> as a fallback instead of <img>. Or maybe conditional comments would work. You could use <video controls poster="animation-1.gif"> except it wouldn't work for IE8 and earlier.

Solution 3:

Using poster="animation-1.gif" also causes the gif to download.

How about using <!--[if lt IE 9]> as a solution?

<video><sourcesrc="animation-1.mp4"type="video/mp4"><!--[if lt IE 9]><img src="animation-1.gif"><![endif]--></video>

---

I was surprised to see this in network inspector too.

Not an issue if your loading larger long videos, and the fallback is just a placeholder.

But when you're trying to use mp4 videos as a replacement for the gifs because mp4 can be a fraction of the size of the gif (ref. https://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video). Downloading both in this scenario is just wrong. I bet a lot of website are doing it this way too.