HTML5 fallback images are being loaded by the browser, even though HTML5 video is supported

Question

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

Answer 1

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

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

<video>
  <source src="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.

Answer 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.

Answer 3

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.