如何制作微信小程序自动播放视频，模拟gif动图效果实例？

本文共计884个文字，预计阅读时间需要4分钟。

需求背景：在小程序页面插入GIF动态图，但GIF文件体积较大，因此采用自动播放视频的模式来模拟GIF效果，丰富页面展示。自动播放的视频无控制条、无声音，自动循环播放。

需求背景：

在小程序页面插入gif动态图，但gif图一般体积比较大，转而用自动播放视频的模式来模拟gif图的效果，丰富页面展示。自动播放的视频，无控制条，无声音，自动循环播放。

技术难点：

因为微信小程序在同一个页面，存在多个视频时（建议不超过3个视频），会出现卡顿甚至闪退的情况。
developers.weixin.qq.com/community/d…

方案：

参考小程序社区讨论方案，当视频未出现在屏幕可视区域时，用图片占位，出现在屏幕中，把图片替换成视频，并且自动播放。

代码注意点：

video标签用wx:if来控制，image标签用visibility样式来占位。