用视频替换 GIF

在此 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. 点击生成报告按钮。

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