video 在iphone手機的ios系統和微信端沒法自動播放

描述：video 在iphone手機，微信端沒法自動播放，ios系統下不能自動播放視頻。並且若是沒有autoplay屬性，在微信端點擊一次，彈不出視頻，要一直觸着兩秒後才能夠打開視頻。若是點擊播放的話，還會自動放大到全屏模式

網上的解決方案：

一、

<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機下仍是全屏播放

三、解決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