用视频替换 GIF

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

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