用视频替换 GIF

Rob Dodson

在此 Codelab 中，通过将动画 GIF 替换为视频来提升性能。

先衡量

首先，衡量网站的表现：

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

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

获取 FFmpeg

您可以通过多种方式将 GIF 转换为视频；本指南使用的是 FFmpeg。该工具已安装在 Glitch VM 中，您也可以根据需要按照这些说明在本地计算机上安装该工具。

打开控制台

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

  1. 点击 Remix to Edit 即可修改项目。
  2. 点击终端（注意：如果系统未显示“终端”按钮，您可能需要使用“全屏”选项）。
  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 接受 cat-herd.gif 的输入（由 -i 标志表示），并将其转换为名为 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

您应该有 1 个 GIF 和 2 个视频：

$ 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 版本为 551, 000 字节，而 WebM 版本仅为 341, 000 字节。这笔节省可不小！

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

预览

  • 如需预览网站，请按 View App（查看应用）。然后按 Fullscreen（全屏）全屏。

体验应该保持不变。目前为止，一切都好。

使用 Lighthouse 进行验证

打开正式版网站后，执行以下操作：

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

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