即使支持HTML5视频，浏览器也会加载HTML5后备图片

问题描述

我有一些HTML5动画GIF动画作为后备广告。很遗憾，即使支持HTML5视频，也会加载GIF。

I have some HTML5 videos with animated GIFs as fallback. Sadly, the GIFs are being loaded even though HTML5 video is supported.

没有使用javascript，有没有办法阻止浏览器下载HTML5后备内容？ 如果没有，我将只使用jquery，但想知道是否有非js解决方案。

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>

网络检查器显示Firefox（以及Chrome）肯定会下载GIF：

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

推荐答案

我从来没有找到答案，所以我只是改变 src 到 data-src 在后备GIF上，如果检测到IE8或更早版本，我使用javascript将其更改回 src 。

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.

这篇关于即使支持HTML5视频，浏览器也会加载HTML5后备图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！