video 在iphone手机的ios系统和微信端没法自动播放

描述:video 在iphone手机,微信端没法自动播放,ios系统下不能自动播放视频。并且若是没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才能够打开视频。若是点击播放的话,还会自动放大到全屏模式

网上的解决方案:javascript

一、java

<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系统下自动全屏的问题jquery

      在video标签上加上属性:webkit-playsinline(对IOS-兼容)       playsinline(对IOS 10+兼容)android

      在ios中微信内置浏览器中,小窗播放视频ios

  注意:以上写法只能实现ios在微信内置浏览器中小窗播放视频,android机下仍是全屏播放

三、解决video在android系统下,微信内置浏览器内自动全屏的问题(该方法并无亲自尝试过,只是能够拿来参考一下)

     A、 在video标签加上属性:x5-video-player-type='h5'  (针对x5内核)       x5-video-player-fullscreen='true'(防止横屏)   

            结合canvas来draw。

web

原文地址:https://blog.csdn.net/tangxiujiang/article/details/78146871canvas

相关文章
相关标签/搜索