将视频格式用于动画内容答案

【问题标题】：Use video formats for animated content将视频格式用于动画内容
【发布时间】：2021-03-29 17:37:08
【问题描述】：

我的网站上有一个 gif 图像，我像这样添加它并且它正在工作。

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

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

为动画内容使用视频格式

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

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

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

【问题讨论】：

标签： html html5-video gif

【解决方案1】：

这表示您最好使用 MPEG4 视频格式而不是 GIF。您可以通过Converter等转换器将您的GIF转换为MGPEG4

您不能在<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>

【讨论】：

让我试试这个。