网站视频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。