解决微信浏览器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 {
}

 

 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/282500.html

(0)
上一篇 2022年8月27日
下一篇 2022年8月27日

相关推荐

发表回复

登录后才能评论