在此 Codelab 中,可以使用视频替换 GIF 动画来提高性能。
先衡量
首先衡量网站表现:
- 如需预览网站,请按查看应用,然后按全屏 。
- 按 `Control+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
以进入图片目录。 - 运行
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 的 input(由 -i
标志表示),并将其转换为名为 cat-herd.mp4 的视频。此操作需要 1 秒才能完成。命令完成后,您应该能够再次输入 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 验证
启动实际网站后:
- 按 `Control+Shift+J`(在 Mac 上,则按 `Command+Option+J`)打开开发者工具。
- 点击 Lighthouse 标签页。
- 确保已选中类别列表中的效果复选框。
- 点击生成报告按钮。
您应该会看到“使用视频格式呈现动画内容”审核现已通过!棒极了!💪