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 there a way to stop the browser from downloading HTML5 fallback content? If not, I will just use jquery but wanted to know if there was a non-js solution.

<video>
  <source src="animation-1.mp4" type="video/mp4">
  <img src="animation-1.gif">
</video>
<video>
  <source src="animation-2.mp4" type="video/mp4">
  <img src="animation-2.gif">
</video>
<video>
  <source src="animation-3.mp4" type="video/mp4">
  <img src="animation-3.gif">
</video>

Network inspector shows that Firefox (and also Chrome) are definitely downloading the GIFs:

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

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

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.