通过HTML5 Video来优化动态GIF

站长手记 作者: 2024-08-28 02:45:01
网页中的动态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>

潜在的问题

总结

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_69888.html
HTML5 Video 动态GIF