在此 Codelab 中,您可以将动画 GIF 替换为 视频。
先衡量
首先衡量网站的表现:
- 如需预览网站,请按查看应用。然后按
全屏
。
- 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
完成后,您应该会看到 Lighthouse 已将此 GIF 标记为 “为动画内容使用视频格式”出现的问题审核。
获取 FFmpeg
您可以通过多种方式将 GIF 转换为视频:本指南使用的是 FFmpeg。它已经安装在 Glitch 虚拟机中 如果需要,可以按照这些说明将其安装到您的 本地 机器 。
打开控制台
仔细检查 FFmpeg 是否已安装并正常运行:
- 点击 Remix to Edit 以使项目可修改。
- 点击终端(注意:如果系统未显示“终端”按钮,您可能需要使用全屏选项)。
- 在控制台中,运行以下命令:
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 验证
实际网站打开后:
- 按 `Ctrl+Shift+J`(在 Mac 上,按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保类别列表中的效果复选框处于选中状态。
- 点击生成报告按钮。
您应该会看到“为动画内容使用视频格式”审核目前为 通过!棒极了!💪