Search code examples
csshtmlmp4fallback

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 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:

network inspector screenshot

Solution

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