非你网

视频以及动画是一个比较好的视觉体验。可是，移动端 h5 的 video 标签不能自动播放视频。下边总结下处理方案。其实，就是在网上找到别人的解决方案来解决自己的事情。

处理处理

video 标签

<video class="video" poster="xxx.jpg" autoplay loop muted 
        playsinline="true"
        x5-playsinline="true" 
        webkit-playsinline="" 
        x-webkit-airplay="allow" 
        x5-video-player-type="h5"
        preload="auto">
                <source src="xxx.mp4" type="video/mp4">
        </video>

方法1，使用类似 gif 图的方式，来实现是视频播放的效果。

https://blog.csdn.net/qq_33929420/article/details/114962347

方法2，使用 js 来手动处理播放

//其他移动端浏览器只能让用户自己触发
$(window).on('touchstart', function(){
    $("video")[0].play();
});
// 兼容微信(微信可以自动播放)
document.addEventListener("WeixinJSBridgeReady", function () {
    $("video")[0].play();
}, false);