使用视频替换 GIF

Rob Dodson

在本代码实验室中，通过使用视频替换动画 GIF 来提高性能。

首先进行衡量

首先衡量网站的性能

  1. 要预览网站，请按查看应用。然后按全屏 fullscreen。
  2. 按 `Control+Shift+J`（在 Mac 上按 `Command+Option+J`）打开 DevTools。
  3. 点击 Lighthouse 选项卡。
  4. 确保在“类别”列表中选中了 Performance（性能）复选框。
  5. 点击 Generate report（生成报告）按钮。

完成后，您应该看到 Lighthouse 已在其“使用视频格式代替动画内容”审核中将 GIF 标记为问题。

获取 FFmpeg

有许多方法可以将 GIF 转换为视频；本指南使用 FFmpeg。它已安装在 Glitch VM 中，如果您愿意，也可以按照这些说明在您的本地机器上安装它。

打开控制台

再次检查 FFmpeg 是否已安装并正常工作

  1. 点击 Remix to Edit（混音以进行编辑）使项目可编辑。
  2. 点击 Terminal（终端）（注意：如果未显示“终端”按钮，您可能需要使用“全屏”选项）。
  3. 在控制台中，运行
which ffmpeg

您应该会获得文件路径

/usr/bin/ffmpeg

将 GIF 更改为视频

  • 在控制台中，运行 cd images 进入 images 目录。
  • 运行 ls 查看内容。

您应该看到类似以下内容

$ ls
cat-herd.gif
  • 在控制台中，运行
ffmpeg -i cat-herd.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p cat-herd.mp4

这会告知 FFmpeg 获取 input（输入），由 -i 标志表示，即 cat-herd.gif，并将其转换为名为 cat-herd.mp4 的视频。这应该需要一秒钟才能运行。命令完成后，您应该可以再次键入 ls 并看到两个文件

$ ls
cat-herd.gif  cat-herd.mp4

创建 WebM 视频

虽然 MP4 自 1999 年以来就已存在，但 WebM 是一个相对较新的格式，最初于 2010 年发布。WebM 视频可能比 MP4 视频小得多，因此同时生成两者是有意义的。幸运的是，<video> 元素允许您添加多个来源，因此如果浏览器不支持 WebM，它可以回退到 MP4。

  • 在控制台中，运行
ffmpeg -i cat-herd.gif -c vp9 -b:v 0 -crf 41 cat-herd.webm
  • 要检查文件大小，请运行
ls -lh

您应该有一个 GIF 和两个视频

$ ls -lh
total 4.5M
-rw-r--r-- 1 app app 3.7M May 26 00:02 cat-herd.gif
-rw-r--r-- 1 app app 551K May 31 17:45 cat-herd.mp4
-rw-r--r-- 1 app app 341K May 31 17:44 cat-herd.webm

请注意，原始 GIF 为 3.7M，而 MP4 版本为 551K，WebM 版本仅为 341K。这是一个巨大的节省！

更新 HTML 以重新创建 GIF 效果

动画 GIF 具有视频需要复制的三个关键特性

  • 它们自动播放。
  • 它们持续循环播放（通常是这样，但可以阻止循环播放）。
  • 它们是静音的。

幸运的是，您可以使用 <video> 元素重新创建这些行为。

  • 在 index.html 文件中，将包含 <img> 的行替换为
<img src="/images/cat-herd.gif" alt="Cowboys herding cats.">
<video autoplay loop muted playsinline></video>

使用这些属性的 <video> 元素将自动播放、无限循环、不播放音频以及内联播放（即，不是全屏），所有这些都是动画 GIF 的预期行为！🎉

指定您的来源

剩下要做的就是指定您的视频来源。<video> 元素需要一个或多个 <source> 子元素，这些子元素指向浏览器可以从中选择的不同视频文件，具体取决于格式支持。使用链接到您的 cat-herd 视频的 <source> 元素更新 <video>

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

预览

  • 要预览网站，请按查看应用。然后按全屏 fullscreen。

体验应该看起来相同。目前为止一切顺利。

使用 Lighthouse 验证

在实时站点打开的情况下

  1. 按 `Control+Shift+J`（在 Mac 上按 `Command+Option+J`）打开 DevTools。
  2. 点击 Lighthouse 选项卡。
  3. 确保在“类别”列表中选中了 Performance（性能）复选框。
  4. 点击 Generate report（生成报告）按钮。

您应该看到“使用视频格式代替动画内容”审核现在已通过！太棒了！💪