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

Posted 赏花赏景赏时光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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在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); 




以上是关于ios系统下不能自动播放视频的主要内容,如果未能解决你的问题,请参考以下文章

微信网页ios自动播放音频、视频

微信内置浏览器 如何小窗不全屏播放视频?

微信内置浏览器 如何小窗不全屏播放视频?

H5 video 常用属性

微信内置浏览器 如何小窗不全屏播放视频?也可以尝试canvas.

仅当我单击全屏选项卡时才以纵向播放视频,它会停止播放(Xcode 4.6)ios6.1