描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频。而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频。如果点击播放的话,还会自动放大到全屏模式
网上的解决方案:
1、
<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);
2、解决video在ios系统下自动全屏的问题
在video标签上加上属性:webkit-playsinline(对IOS-兼容) playsinline(对IOS 10+兼容)
在ios中微信内置浏览器中,小窗播放视频
注意:以上写法只能实现ios在微信内置浏览器中小窗播放视频,android机下还是全屏播放
3、解决video在android系统下,微信内置浏览器内自动全屏的问题(该方法并没有亲自尝试过,只是可以拿来参考一下)
A、 在video标签加上属性:x5-video-player-type='h5' (针对x5内核) x5-video-player-fullscreen='true'(防止横屏)
结合canvas来draw。
原文地址:https://blog.csdn.net/tangxiujiang/article/details/78146871