title: HTML5 fallback images are being loaded by the browser, even though HTML5 video is supported
body: <p>I have some HTML5 videos with animated GIFs as fallback. Sadly, the GIFs are being loaded even though HTML5 video is supported.</p>
  
  <p><strong>Without using javascript, is there a way to stop the browser from downloading HTML5 fallback content?</strong> If not, I will just use jquery but wanted to know if there was a non-js solution.</p>
  
  <pre><code>&lt;video&gt;
    &lt;source src="animation-1.mp4" type="video/mp4"&gt;
    &lt;img src="animation-1.gif"&gt;
  &lt;/video&gt;
  &lt;video&gt;
    &lt;source src="animation-2.mp4" type="video/mp4"&gt;
    &lt;img src="animation-2.gif"&gt;
  &lt;/video&gt;
  &lt;video&gt;
    &lt;source src="animation-3.mp4" type="video/mp4"&gt;
    &lt;img src="animation-3.gif"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Network inspector shows that Firefox (and also Chrome) are definitely downloading the GIFs:</p>
  
  <p><img src="https://i.stack.imgur.com/8oPDj.png" alt="network inspector screenshot"></p>