使用视频格式制作动画内容
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
Lighthouse 报告的“优化建议”部分会列出所有 GIF 动画,以及将这些 GIF 动画转换为视频后预计可缩短的秒数:
为什么应将动画 GIF 替换为视频
使用大型 GIF 提供动画内容会导致效率低下。
通过将大型 GIF 转换为视频,您可以为用户节省大量费用带宽。
建议您改用 MPEG4/WebM 视频(来提供动画)和 PNG/WebP(来提供静态图片)以减少网络活动消耗的字节数。
制作 MPEG 视频
您可以通过多种方式将 GIF 转换为视频。
本指南中使用的是 FFmpeg 工具。
如需使用 FFmpeg 将 GIF my-animation.gif
转换为 MP4 视频,请在控制台中运行以下命令:
ffmpeg -i my-animation.gif my-animation.mp4
这会告知 FFmpeg 将 my-animation.gif
作为输入,
用 -i
标志表示,
并将其转换为名为 my-animation.mp4
的视频。
创建 WebM 视频
WebM 视频比 MP4 视频小得多
但并非所有浏览器都支持 WebM,因此最好同时生成这两种格式。
如需使用 FFmpeg 将 my-animation.gif
转换为 WebM 视频,请在控制台中运行以下命令:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
将 GIF 图片替换为视频
动画 GIF 具有视频需要复制的三个关键特征:
- 它们会自动播放。
- 它们会不断循环(通常,但可以阻止循环)。
- 它们很安静。
幸运的是,您可以使用 <video>
元素重新创建这些行为。
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
使用可将 GIF 转换为 HTML5 视频的服务
许多图片 CDN 都支持将 GIF 转换为 HTML5 视频。您上传了一个
GIF 到图片 CDN,图片 CDN 返回 HTML5 视频。
针对特定堆栈的指南
AMP
对于动画内容,请使用
amp-anim
,以将 CPU 降至最低
使用。
资源
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-05-02。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2019-05-02\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-05-02。"],[],[]]