深圳网站制作：使用HTML5视频改善动画GIF性能

2019.08.13 mf_web

动画GIF对他们来说很有意义; 在所有浏览器中，它们很容易制作并且运行良好。但GIF格式最初并不适用于动画。GIF格式的原始设计是提供一种使用无损压缩算法（称为LZW压缩）压缩单个文件内的多个图像的方法，这意味着它们可以在相当短的时间内下载，即使在慢速连接上也是如此。

之后，添加了基本的动画功能，允许绘制文件中的各种图像（帧）时间延迟。默认情况下，构成动画的一系列帧仅显示一次，在显示最后一帧后停止。Netscape Navigator 2.0是第一款增加动画GIF循环功能的浏览器，它导致动画GIF的兴起，正如我们今天所知道的那样。

作为动画平台，GIF格式非常有限。动画中的每个帧仅限于256种颜色的调色板，多年来，压缩技术的进步使得动画和视频文件的压缩和使用方式得到了一些改进。与适当的视频格式不同，GIF格式不利用任何新技术，这意味着即使几秒钟的内容也会导致非常大的文件大小，因为存储了大量重复信息。

深圳网站制作即使您尝试使用像Gifsicle这样的工具来调整GIF的质量和长度，也很难将其削减到合理的文件大小。这就是为什么像Giphy，Imgur等GIF重型网站不使用实际的GIF格式，而是将其转换为HTML5视频并向用户提供服务的原因。正如Pinterest工程团队发现的那样，将动画GIF转换为视频可以减少加载时间并提高播放流畅度，从而带来更愉悦的用户体验。

因此，我们将研究一些技术，使我们能够使用HTML5视频作为动画GIF的替代品。我们将学习如何将动画GIF转换为视频文件，并检查如何在网络上正确嵌入这些视频文件，以便它们就像GIF一样。最后，我们将考虑在使用此解决方案之前需要思考的一些潜在缺点。

将动画GIF转换为视频

第一步是将GIF文件转换为视频格式。MP4是浏览器中支持最广泛的格式，几乎94％的浏览器都享有支持，因此这是一个安全的默认设置。

caniuse.com上的支持表显示了对MP4视频格式的浏览器支持 — 所有浏览器中有94％支持MP4格式（大预览）

另一种选择是WebM格式，它提供高质量的视频，通常可与MP4相媲美，但通常缩小文件大小。但是，目前浏览器支持并不普及，因此您不能仅仅使用WebM等效替换MP4文件。

caniuse.com上的支持表显示了对WebM视频格式的浏览器支持 — Internet Explorer和Safari是没有WebM支持的着名浏览器（大预览）

但是，由于该<video>标记支持多个<source>文件，因此我们可以将WebM视频提供给支持它们的浏览器，同时在其他任何地方回退到MP4。

让我们继续将动画GIF转换为MP4和WebM。有几个在线工具可以帮助你做到这一点，但他们中的许多人使用ffmpeg，所以我们将跳过中间人，而只是使用它。ffmpeg是一个免费的开源命令行工具，专为处理视频和音频文件而设计。它还可用于将动画GIF转换为视频格式。

要查明ffmpeg您的计算机上是否有，请启动终端并运行该ffmpeg命令。这应显示一些诊断信息，否则，您需要安装它。可以在此页面上找到适用于Windows，macOS和Linux的安装说明。由于我们将转换为WebM，因此您需要确保ffmpeg安装的任何构建都是使用libvpx编译的。

要按照本文中包含的命令进行操作，您可以使用计算机上的任何动画GIF文件，或者抓住刚刚超过28MB的GIF文件。让我们从下一节中将GIF转换为MP4开始。

将GIF转换为MP4

打开终端实例并导航到测试gif所在的目录，然后运行以下命令将其转换为MP4视频文件：

ffmpeg -i animated.gif video.mp4

这应该会在几秒钟后在当前目录中输出一个新的视频文件，具体取决于您要转换的GIF文件的大小。该-i标志指定输入GIF文件的路径，然后指定输出文件（在此实例中为video.mp4）。在我的28MB GIF上运行此命令会生成一个大小仅为536KB的MP4文件，文件大小减少98％，视觉质量大致相同。

但我们可以走得更远。ffmpeg有很多选项可供您进一步调节视频输出。一种方法是采用称为恒定速率因子（CRF）的编码方法来进一步调整MP4输出的大小。这是您需要运行的命令：

ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4

如您所见，上面的命令与前一个命令相比有几个新标志。-b:v通常用于限制输出比特率，但在使用CRF模式时，必须将其设置为0.该-crf标志控制视频输出的质量。它接受0到51之间的值; 值越低，视频质量和文件大小越高。

在测试GIF上运行上述命令，将视频输出调整为仅386KB，质量没有明显差异。如果要进一步调整大小，可以增加CRF值。请记住，较高的值会降低视频文件的质量。

将GIF转换为WEBM

您可以通过在终端中运行以下命令将GIF文件转换为WebM：

ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm

此命令与前一个命令几乎相同，但新-c标志除外，该标志用于指定应该用于此转换的编解码器。我们正在使用vp9编解码器，它继承了vp8编解码器。

此外，在这种情况下，我已将CRF值调整为41，因为CRF值不一定会在视频格式中产生相同的质量。此特定值导致WebM文件比MP4小16KB，具有大致相同的视觉质量。

既然我们知道如何将动画GIF转换为视频文件，那么让我们看看我们如何使用HTML5 <video>标记模拟他们在浏览器中的行为。

用浏览器中的视频替换动画GIF

在网页上制作像GIF一样的视频并不像在<img>标签中删除文件那么容易，但也不是那么困难。要记住的动画GIF的主要特质如下：

他们自动播放
它们不断循环
他们沉默了

虽然您默认使用GIF文件获得这些质量，但我们可以使用少数属性使视频文件以完全相同的方式运行。以下是您将视频文件嵌入到GIF中的方式：

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

此标记指示浏览器自动启动视频，连续循环播放，不播放声音，并在不显示任何视频控件的情况下播放内联。这提供了与动画GIF相同的体验，但具有更好的性能。

要为视频指定更多内容，您可以使用标记中的<source>元素，<video>如下所示：

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

这告诉浏览器根据格式支持从提供的视频文件中进行选择。在这种情况下，如果支持WebM视频将被下载和播放，否则将使用MP4文件。

为了使不支持HTML5视频的旧浏览器更加健壮，您可以添加一些链接到原始GIF文件的HTML内容作为后备。

<video autoplay loop muted playsinline>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.       
    <a href="/animated.gif">Click here to view original GIF</a></video>

或者您可以直接在<img>标记中添加GIF文件：

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

现在我们已经研究了如何使用HTML5视频在浏览器中模拟动画GIF，让我们在下一节中考虑一些潜在的缺点。

潜在的缺点

在采用HTML5视频作为GIF替代品之前，您需要考虑一些缺点。它显然不如简单地将GIF上传到页面并观看它只是在任何地方工作一样方便。您需要首先对其进行编码，并且可能难以实现在所有方案中都能很好地运行的自动化解决方案。

最安全的做法是手动转换每个GIF并检查输出结果，以确保视觉质量和文件大小之间的良好平衡。但在大型项目中，这可能不太实际。在这种情况下，最好是像Cloudinary这样的服务为您做繁重的工作。

另一个问题是，与图像不同，浏览器不会预加载视频内容。由于视频文件可以是任意长度，因此通常会跳过它们，直到主线程准备好解析其内容为止。这可能会使视频文件的加载延迟几百毫秒。

此外，对自动播放视频有很多限制，特别是在移动设备上。即使视频不包含音频曲目，视频也会muted在Chrome for Android和iOS Safari中自动播放该属性，并且在不允许自动播放的情况下，用户只会看到视频应该存在的空白区域。一个例子是Chrome for Android中的数据保护模式，即使您正确设置了所有内容，自动播放视频也无法正常工作。

要考虑上述任何一种情况，您应该考虑使用该poster属性为视频设置占位符图像，以便在视频由于某种原因无法自动播放时，视频区域仍然填充有意义的内容。还要考虑使用controls属性，即使不允许视频自动播放，也允许用户启动播放。