Safari 11.1 发布了一个奇怪但非常有用的功能：能够在 <img> 标签中使用视频源。其理念是它与 GIF 的作用相同（静音、自动播放、重复），但具有很大的性能提升。有多大？“比 GIF 等效快 20 倍，解码速度快 7 倍，” Colin Bendell 说。
并非所有浏览器都支持此功能，因此，为了执行回退，<picture> 元素已准备就绪。 Bruce Lawson 展示 了它的易用性。
<picture>
<source type="video/mp4" srcset="adorable-cat.mp4">
<!-- perhaps even an animated WebP fallback here as well -->
<img src="adorable-cat.gif" alt="adorable cat tears throat out of owner and eats his eyeballs">
</picture>Šime Vidas 指出，使用 <video> 标签可以获得更广泛的浏览器支持。
<video src="https://media.giphy.com/media/klIaoXlnH9TMY/giphy.mp4" muted autoplay loop playsinline></video>但正如 Bendell 所指出的那样，视频并没有带来性能优势，尤其是视频没有得到预加载器的帮助。遗憾的是，目前只能使用 <video>，因为
存在这个 令人讨厌的 WebKit 错误，它会导致 Safari 在预加载器下载第一个
<source>，无论 mimetype 声明如何。主 DOM 加载器会意识到错误并选择正确的选项。但是，损害已经造成。预加载器浪费了提前下载图像的机会，而且还会下载错误的版本，浪费字节。好消息是我已经修补了这个错误，它应该会在 Safari TP 45 中发布。简而言之，在 Safari 的下一个版本达到 90% 以上的用户群之前，不建议使用
<picture>和<source type>进行 mime 类型选择。
尽管如此，最终它还是非常有用。
这个有什么功能是 video 标签做不到的？
从功能上来说，没有区别，但是性能有优势。查看上面的文章；)
好的，上面提到的文章说，与图像不同，浏览器不会预加载 video 标签。video 标签不是有一个属性告诉浏览器执行此操作吗？我似乎记得它叫做 preload...
在这种情况下，不需要
preload属性，因为页面已经通过autoplay属性指示视频应该立即加载。我想再次强调，确保静音视频自动播放与动画图像一样快的责任在于浏览器。如果由于某种原因目前没有实现，那么浏览器需要修复这个问题。使用带有 MP4 源的
<img>语法更简洁（更短），但网站不应该为了性能原因而被迫使用它。我认为这是一个好主意……Safari 做得很好……我真正想要的是一种本机浏览器方法，可以在 CSS 中将视频设置为背景图像……这将非常棒……但我现在（或者在不久的将来）可以接受任何可以得到的东西。
我认为问题不在于“性能”，而在于语义。
图片标签中的视频是否会忽略音频？（应该会，因为图像不是多媒体内容）。
也许更大的问题是，动画媒体和静态媒体（显然不一样）的概念被混淆到一个标签或另一个标签中。
事实上，video 也是一个糟糕的名字。我只是不确定我是否有其他替代名称，不会完全混乱。
“比 GIF 等效快 20 倍，解码速度快 7 倍”。这真是太棒了。
我们能否期待所有主要浏览器很快支持它？
在什么情况下可以使用视频作为图像？
任何您可能选择使用动画 GIF 的地方。
那么使用上面提到的 video 标签的回退呢？
也许老开发人员可以回忆起老 IE（4、5 或 6）不能准确地记住 .avi 和 .mpeg 视频文件的播放方式。因此，此功能并不算太新；)