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

柔情只为你懂 2022-06-07 00:47 464阅读 0赞

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

**HTML如下：**

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

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

![Center][]

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

![Center 1][]

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

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

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

**                                                ![Center 2][]**

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

**                                                ![Center 1][]**

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

**      利用微信的JSAPI  的WeiixinJSBridgeReady()**

**      html如下： **

在html中引入jweixin.js

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

//这样的写法在android 和ios下都不能生效
              $('#shakeVideo').play();
              //必须在weixin JSAPI的WeixinJSBridgeReady才能生效
              document.addEventListener('WeixinJSBridgeReady',function(){
                  $('#shakeVideo').play();
              },false);
     
     
     
     
            结论：上面的写法可以在ios系统下自动播放，只有部分android机可以自动播放
            bug：上面写法又出现另一个bug，就是在android和ios下，视频都自动全屏了
     3、解决video在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、微信团队把视频来源进行了域名限制，可以考虑把视频挂在腾讯视频上，然后在引用腾讯视频提供的视频地址，在微信中播放，但是
             这样的话可能视频中会加入广告（这个方法没有检测过，只是提供一个参考而已）
     
     综上所述，在微信浏览器下自动播放视频的代码如下：
     
     
     
    <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);

[Center]: /images/20220607/d3b3246941cf499c8754b1ef8d3623bc.png
[Center 1]: /images/20220607/3d4edceccd484b119cf1ab7b00607974.png
[Center 2]: /images/20220607/a2710e11fe794689b16fcbcb0d28b9aa.png