如何解决Html5中video视频标签微信端移动端web端不能自动播放问题?

 

原标题:如何解决Html5中video视频标签微信端移动端web端不能自动播放问题?

如何解决Html5中video视频标签微信端移动端web端不能自动播放问题?


H5 video标签,移动端不能自动播放,下面直接上解决方案:


1、IOS微信端,自带浏览器不能自动播放

 <video class="video" id="myVideo" src="视频地址" 
 autoplay="" 
 muted="" 
 loop="" 
 webkit-playsinline="" 
 playsinline="" 
 x5-playsinline="" 
 x-webkit-airplay="allow" 
 x5-video-player-type="h5" 
 x5-video-player-fullscreen="" 
 x5-video-orientation="portraint"  
 style="display: inline;"
/>您的浏览器不支持vedio,请更换浏览器再观看!</video>



2、JS解决方案,只能解决一般问题

<script>
function autoPlayVideo() {
    /* 自动播放视频效果,解决浏览器或者APP自动播放问题 */
    function videoInBrowserHandler() {
        videoPlay(true);
        document.body.removeEventListener('touchstart', videoInBrowserHandler);
    }
    document.body.addEventListener('touchstart', videoInBrowserHandler);
    /* 自动播放视频效果,解决微信自动播放问题 */
    function videoInWeixinHandler() {
        videoPlay(true);
        document.addEventListener("WeixinJSBridgeReady", function () {
            videoPlay(true);
        }, false);
        document.removeEventListener('DOMContentLoaded', videoInWeixinHandler);
    }
    document.addEventListener('DOMContentLoaded', videoInWeixinHandler);
}
function videoPlay(isPlay) {
    var media = document.getElementById('myVideo');
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}
autoPlayVideo();
</script>




教你如何每天领取饿了么红包,饿了么优惠卷,饿了么会员?

教你如何每天领取美团红包,美团优惠卷,美团会员?

其他相关文章
    领支付宝红包赞助服务器费用
    微信公众号:小猪波罗蜜
    关注公众号,回复999,可联系站长解答疑问哦。每天分享更多有趣的事儿,有趣有料!
    99人已关注

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信图片_20190322181744_03.jpg

    微信扫一扫打赏

    请作者喝杯咖啡吧~

    支付宝扫一扫领取红包,优惠每天领

    二维码1

    zhifubaohongbao.png

    二维码2

    zhifubaohongbao2.png