网页中的动态GIF图片是非常受欢迎的,因为它们相比静态图片更生动,相比网页视频更简单。但是GIF图片通常具有较大的体积,就导致网页加载速度变慢,内存使用增加
动态GIF转换成Video
GIF 转换成 MP4
ffmpeg -i animated.gif video.mp4
ffmpeg -i animated.gif -b:v 0 -crf 25 video.mp4
GIF转换成WebM
ffmpeg -i animated.gif -c vp9 -b:v 0 -crf 41 video.webm
浏览器中用Video替换GIF
<video autoplay loop muted playsinline src="video.mp4"></video>
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
<a href="/animated.gif">Click here to view original GIF</a>
</video>
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
<img src="animated.gif">
</video>
潜在的问题
总结