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

Question

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

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

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

Answer 1

我从未找到答案，因此我只是在后备GIF上将src更改为data-src，如果检测到IE8或更早版本，则使用javascript将其更改回src

Answer 2

我假设您想要IE8及更早版本的后备版本。您的解决方案是有效的HTML，但我还没有看到其他人推荐它。其他人使用<p>Your Message Here</p>作为后备而不是<img>。或者也许conditional comments会起作用。您可以使用<video controls poster="animation-1.gif">，但它不适用于IE8及更早版本。

Answer 3

使用poster="animation-1.gif"也会导致gif下载。

如何使用<!--[if lt IE 9]>作为解决方案？

<video>
  <source src="animation-1.mp4" type="video/mp4">
  <!--[if lt IE 9]><img src="animation-1.gif"><![endif]-->
</video>

我也很惊讶地在网络检查员身上看到了这一点。

如果您加载较大的长视频并且后备只是一个占位符，则不会出现问题。

但是当你尝试使用mp4视频作为gifs的替换时，因为mp4可以是gif大小的一小部分（参考https://rigor.com/blog/2015/12/optimizing-animated-gifs-with-html5-video）。 在这种情况下下载两者都是错误的。我打赌很多网站都是这样做的。