将视频格式用于动画内容

Question

我的网站上有一个 gif 图片，我按这样添加了它，它正在运行。

<img src="assets/images/banner-gif.gif" alt="hero-banner" class="bannerImg">

现在我在 PageSpeed Insights 上检查网站性能，然后收到消息

Use video formats for animated content

然后我尝试了下面的代码，但它不起作用。

  <video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <img src="assets/images/banner-gif.gif" alt="hero-banner" class="bannerImg">
</video>

你能帮我解决这个问题吗？

Answer 1

这表示您最好使用 MPEG4 视频格式而不是 GIF。您可以通过 Converter

等转换器将您的 GIF 转换为 MPGEG4

您不能在 <video> 标签中使用 GIF。将文件转换为 MPEG4 并将其另存为 video.mp4 文件名。然后在<video>标签

中使用

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

将视频格式用于动画内容

Use video formats for animated content

html

gif

html5-video