ios系统下不能自动播放视频

功能：在网页加载好之后，自动播放页面中的视频

HTML如下：

<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls"></video>

     bug: 在video标签内定义的属性autoplay，在ios或者android内的微信浏览器是不生效的

     ios系统下的效果图：从图中可以看出视频没有自动播放，而且整个video显示的是一片空白，简直让人无法忍受。

                                                


       android系统下的效果图：从图中可以看出视频没有自动播放，但video显示的是一片黑色的背景，这个勉强还能接受

                                               


1、解决ios系统下，video显示一片空白的bug

      方法：可以给video加一个background-imag,即可解决页面加载完成显示空白的问题，但是android显示的还是黑色背景          

<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);"></video>

      ios系统下显示的效果：可以看到，给video加上背景图片，显示的就是背景图，而不是空白内容了

                                                



       android系统下显示的效果：给video加上背景图没用，显示的还是黑色背景

                                                




2、解决ios系统下，视频不能自动播放的问题

      利用微信的JSAPI  的WeiixinJSBridgeReady()

      html如下： 

  <video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);"></video>

     在html中引入jweixin.js 

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

      部分js如下：（先引入jquery）

//这样的写法在android 和ios下都不能生效
$('#shakeVideo').play();
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener('WeixinJSBridgeReady',function(){
$('#shakeVideo').play();
},false);

       结论：上面的写法可以在ios系统下自动播放，只有部分android机可以自动播放

       bug：上面写法又出现另一个bug，就是在android和ios下，视频都自动全屏了

3、解决video在
cb09
ios系统下自动全屏的问题

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

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

<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline></video>

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

4、解决video在android系统下，微信内置浏览器内自动全屏的问题（该方法并没有亲自尝试过，只是可以拿来参考一下）

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

            结合canvas来draw。

      html如下：

<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline x5-video-player-type='h5' x5-video-player-fullscreen='true'></video>

<canvas id='myCanvas'></canvas>

      增加css属性使video隐藏： 

video{
display:none;
}

      部分js代码如下：

//获取video对象
var videoO = $('#shakeVideo');
//获取画布
var canvasO = $('#myCanvas');
//设置画布
var canvasO2D = canvasO.getContext('2d');
//设置setInterval定时器
var timer = null;
//监听播放
videoO.addEventListener('play',function(){
timer = setInterval(function(){
canvasO .drawImage(videoO,0,0,640,320);
},20);
},false);
//监听暂停
videoO.addEventListener('pause',function(){
clearInterval(timer);
},false);
//监听结束
videoO.addEventListener('ended',function(){
clearInterval(timer);
},false);

  B、微信团队把视频来源进行了域名限制，可以考虑把视频挂在腾讯视频上，然后在引用腾讯视频提供的视频地址，在微信中播放，但是

        这样的话可能视频中会加入广告（这个方法没有检测过，只是提供一个参考而已）

综上所述，在微信浏览器下自动播放视频的代码如下：

<!--html代码如下-->
<!--在html中引入jweixin.js-->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" controls="controls" style="background:url(img/shaking_bg.jpg);" webkit-playsinline playsinline x5-video-player-type='h5' x5-video-player-fullscreen='true'></video>
<canvas id='myCanvas'></canvas>

/*css*/
video{
display:none;
}

//js代码如下
//这样的写法在android 和ios下都不能生效
$('#shakeVideo').play();
//必须在weixin JSAPI的WeixinJSBridgeReady才能生效，该方法对ios生效，对部分android生效，实现页面加载完自动播放功能
document.addEventListener('WeixinJSBridgeReady',function(){
$('#shakeVideo').play();
},false);

//以下方法针对android，解决全屏播放的问题
//获取video对象
var videoO = $('#shakeVideo');
//获取画布
var canvasO = $('#myCanvas');
//设置画布
var canvasO2D = canvasO.getContext('2d');
//设置setInterval定时器
var timer = null;
//监听播放
videoO.addEventListener('play',function(){
timer = setInterval(function(){
canvasO .drawImage(videoO,0,0,640,320);
},20);
},false);
//监听暂停
videoO.addEventListener('pause',function(){
clearInterval(timer);
},false);
//监听结束
videoO.addEventListener('ended',function(){
clearInterval(timer);
},false);