因为专注,所以专业
2005 - 2020

通过HTML5 Video来优化动态GIF

时间:2020-02-08 13:59:18    作者:八叔模板堂

动态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>

潜在的问题

总结

赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部