用视频替换 GIF

罗布·多德森

在此 Codelab 中，可以使用视频替换 GIF 动画来提高性能。

先衡量

首先衡量网站表现：

  1. 如需预览网站，请按查看应用，然后按全屏 全屏。
  2. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
  3. 点击 Lighthouse 标签页。
  4. 确保已选中类别列表中的效果复选框。
  5. 点击生成报告按钮。

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

获取 FFmpeg

您可以通过多种方式将 GIF 转换为视频；本指南使用的是 FFmpeg。它已安装在 Glitch 虚拟机中，如果需要，您也可以按照这些说明在本地机器上安装。

打开控制台

仔细检查 FFmpeg 是否已安装并正常运行：

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

您应该会得到一个返回的文件路径：

/usr/bin/ffmpeg

将 GIF 更改为视频

  • 在控制台中，运行 cd 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 接受 cat-herd.gif 的 input（由 -i 标志表示），并将其转换为名为 cat-herd.mp4 的视频。此操作需要 1 秒才能完成。命令完成后，您应该能够再次输入 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 为 370 万，而 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> 子元素，这些子元素指向浏览器可供选择的不同视频文件，具体取决于格式支持。使用链接到您的猫鼠视频的 <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>

预览

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

实际体验应该没有变化。目前一切都好。

通过 Lighthouse 验证

启动实际网站后：

  1. 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
  2. 点击 Lighthouse 标签页。
  3. 确保已选中类别列表中的效果复选框。
  4. 点击生成报告按钮。

您应该会看到“使用视频格式呈现动画内容”审核现已通过！棒极了！💪