阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

网站视频video在iphone也就是iOS系统,微信浏览器无法自动播放。并且去除全屏自动播放问题

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/rz/184560.html 坑啊坑啊,微信浏览器内核严谨问题比较严重,安卓手机下打开微信浏览器就可以自动播放视频,而iOS系统下却打不开,让人难解。
最终在csdn技术论坛上找到了答案。

方法如下

ios系统下不能自动播放视频。。。如果点击播放的话,还会自动放大到全屏模式
解决方案:
 
 <script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script>
 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
 
 
 <video id="shakeVideo" preload="auto" controls  poster="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/video-load.png" autoplay webkit-playsinline="true" playsinline="true" src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4">
 </video>
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效,该方法对ios生效,对部分android生效,实现页面加载完自动播放功能
//模拟点击事件  
var video = document.getElementById("shakeVideo");
    video.play();
    document.addEventListener('WeixinJSBridgeReady',function(){
        video.play();
    },false);
解决video在ios系统下自动全屏的问题
 
      在video标签上加上属性:webkit-playsinline(对IOS-兼容)       playsinline(对IOS 10+兼容)
 
      在ios中微信内置浏览器中,小窗播放视频
 
  注意:以上写法只能实现ios在微信内置浏览器中小窗播放视频,android机下还是全屏播放
 
4、解决video在android系统下,微信内置浏览器内自动全屏的问题(该方法并没有亲自尝试过,只是可以拿来参考一下)
 
     A、 在video标签加上属性:x5-video-player-type='h5'  (针对x5内核)       x5-video-player-fullscreen='true'(防止横屏)   
 
            结合canvas来draw。

相关文章