解决微信浏览器video视频自动播放的问题

<video controls="controls" src="" id="video" 
x5-video-player-type
="h5"
preload
="metadata"
playsinline
="true" webkit-playsinline="true"
x-webkit-airplay
="true"
x5-video-orientation="portraint"
x5-video-player-fullscreen
="true">
</video>

1.playsinline="true" webkit-playsinline="true 解决ios自动播放全屏问题

2.x5-video-player-type="h5" x5-video-player-fullscreen="true" 解决安卓同层级播放

3.ios微信下通过 WeixinJSBridgeReady 事件进行自动播放,这个方法在安卓微信浏览器不生效

  //引入链接
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 
 
  //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
    document.addEventListener("WeixinJSBridgeReady", function () {
     document.getElementById('video').play();
    }, false)

4.最后安卓微信浏览器解决方法是触摸播放:

(这样ios还是自动播放,只有在安卓端微信浏览器是触摸播放)

  //判断是否是Android端打开链接
  if (navigator.userAgent.indexOf("Android") > 0) {
     //如果是Android的话,在判断是否是微信端打开链接
    function is_weixn(){  
   var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        return true;  
    } else {  
        return false;  
    }  
}  
//如果是在Android端微信打开 触摸播放
if( is_weixn() ) {
   document.addEventListener('touchstart', function() {
   document.getElementById('bgVid').play()
     })
} else {
}

 

 

posted @ 2022-08-27 14:55  ℳℓ马温柔  阅读(3959)  评论(0编辑  收藏  举报