用视频替换 GIF

Rob Dodson

在此 Codelab 中，您可以将动画 GIF 替换为 视频。

先衡量

首先衡量网站的表现：

  1. 如需预览网站，请按查看应用。然后按 全屏 全屏。
  2. 按 `Ctrl+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 以进入 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 为 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. 按 `Ctrl+Shift+J`（在 Mac 上，按 `Command+Option+J`）打开开发者工具。
  2. 点击 Lighthouse 标签页。
  3. 确保类别列表中的效果复选框处于选中状态。
  4. 点击生成报告按钮。

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