h5-video自动播放兼容性处理

小灰灰 2022-11-09 12:40 172阅读 0赞

### [HTML<video/>视频无法自动播放][HTML_video] ###

最新|解决前端微信浏览器中video标签不能自动播放视频问题  
最近前端有一个需求要求在网页中自动播放视频，PC端没有问题，移动端是有问题的，移动端为了避免浪费用户的流量，默认video是不能够自动播放的，即使加了autoplay属性，也只能实现在PC端自动播放，在移动端依旧不能自动播放。

网上有很多解决方案，都不能真正的解决问题，于是自己尝试了一下。

### video 标签属性 ###

*  src: 设置显示视频路径
 *  controls: 显示控制栏
 *  loop: 控制视频循环播放
 *  autoplay: 自动播放
 *  muted:设置静音播放

测试pc端、移动端浏览器兼容情况 ( **支持**✔  **不支持 **✘ **暂无 ∅**)

<div class="video-box">
    			<video muted preload autoplay loop controls="false" id="myVideo" type="video/mp4" width="100%" webkit-playsinline="true"
    				x-webkit-airplay="allow" playsinline="" x5-video-player-type="h5" x5-video-orientation="portrait"
    				x5-video-player-fullscreen="portraint"
    				src="https://static.yximgs.com/udata/pkg/fe/kwai_video.a7616d99.mp4"
    				poster="https://website.didiglobal.com/dist/img/homepage1-app.fb9b0c10.jpg">
    				对不起，您的手机不支持本系统
    			</video>
    			<div class="btn-play"></div>
    			<div class="processBar">
    				<div class="playProcess"></div>
    				<div class="loadProcess"></div>
    			</div>
    		</div>

video属性：***muted autoplay loop***

<table> 
 <tbody> 
  <tr> 
   <td>平台/浏览器</td> 
   <td style="width:60px;">自带</td> 
   <td style="width:31px;">safari</td> 
   <td>uc</td> 
   <td>微信</td> 
   <td>QQ</td> 
   <td>firefox</td> 
   <td style="width:108px;">chrome</td> 
   <td style="width:81px;">百度</td> 
   <td style="width:63px;">360</td> 
   <td>IE</td> 
   <td>Edge</td> 
  </tr> 
  <tr> 
   <td>ios</td> 
   <td style="width:60px;">✔</td> 
   <td style="width:31px;">✔</td> 
   <td>✘</td> 
   <td>✘</td> 
   <td>✘</td> 
   <td>✔</td> 
   <td style="width:108px;">✔</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td style="width:60px;"><strong>∅</strong></td> 
   <td style="width:31px;">&nbsp;</td> 
   <td>✔</td> 
   <td><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✔</td> 
   <td style="width:108px;">✔</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td>✔</td> 
   <td>✔</td> 
  </tr> 
  <tr> 
   <td>android</td> 
   <td style="width:60px;">&nbsp;</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✘</td> 
   <td>✔</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>华为</td> 
   <td style="width:60px;">✔</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✘</td> 
   <td>✔</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>小米</td> 
   <td style="width:60px;">✔</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">&nbsp;</td> 
   <td style="width:63px;">&nbsp;</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>vivo/oppo</td> 
   <td style="width:60px;">&nbsp;</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">&nbsp;</td> 
   <td style="width:63px;">&nbsp;</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
 </tbody> 
</table>

video属性：***autoplay loop***

<table> 
 <tbody> 
  <tr> 
   <td>平台/浏览器</td> 
   <td style="width:60px;">自带</td> 
   <td style="width:31px;">safari</td> 
   <td>uc</td> 
   <td>微信</td> 
   <td>QQ</td> 
   <td>firefox</td> 
   <td style="width:108px;">chrome</td> 
   <td style="width:81px;">百度</td> 
   <td style="width:63px;">360</td> 
   <td>IE</td> 
   <td>Edge</td> 
  </tr> 
  <tr> 
   <td>ios</td> 
   <td style="width:60px;">✘</td> 
   <td style="width:31px;">✘</td> 
   <td>✘</td> 
   <td>✘</td> 
   <td>✘</td> 
   <td>✘</td> 
   <td style="width:108px;">✘</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✘</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>pc</td> 
   <td style="width:60px;"><strong>∅</strong></td> 
   <td style="width:31px;">&nbsp;</td> 
   <td>✔</td> 
   <td><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✘</td> 
   <td style="width:108px;">✘</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td>✔</td> 
   <td>✔</td> 
  </tr> 
  <tr> 
   <td>android</td> 
   <td style="width:60px;">&nbsp;</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✘</td> 
   <td>✔</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>华为</td> 
   <td style="width:60px;">✔</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>✔</td> 
   <td>✘</td> 
   <td>✔</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">✔</td> 
   <td style="width:63px;">✔</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>小米</td> 
   <td style="width:60px;">✔</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">&nbsp;</td> 
   <td style="width:63px;">&nbsp;</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
  <tr> 
   <td>vivo/oppo</td> 
   <td style="width:60px;">&nbsp;</td> 
   <td style="width:31px;"><strong>∅</strong></td> 
   <td>&nbsp;</td> 
   <td>✘</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td style="width:108px;">&nbsp;</td> 
   <td style="width:81px;">&nbsp;</td> 
   <td style="width:63px;">&nbsp;</td> 
   <td><strong>∅</strong></td> 
   <td><strong>∅</strong></td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td><strong>综上所述<br> muted静音</strong></td> 
   <td><strong>true</strong></td> 
   <td>f<strong>alse</strong></td> 
  </tr> 
  <tr> 
   <td>自动播放情况</td> 
   <td>pc端基本浏览器都兼容&nbsp;<br> ios端除uc与QQ，微信，其余兼容<br> android端基本浏览器都兼容</td> 
   <td>pc端<em><strong>&nbsp;</strong></em>除<strong><em>chrome,firefox</em></strong>外，基本浏览器都兼容&nbsp;<br> ios端除百度外，基本都不兼容<br> android端基本浏览器都兼容</td> 
  </tr> 
 </tbody> 
</table>

video自动播放被***微信(x5内核)***拦截，引入微信SDK

<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> 
    <video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png"> 
          <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
          <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"> 
          <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"> 
          <p>Your user agent does not support the HTML5 Video element.</p> 
    </video> 
     
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
    <script> 
         //一般情况下，这样就可以自动播放了，但是一些奇葩iPhone机不可以 
         document.getElementById('car_audio').play(); 
        //必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 
        document.addEventListener("WeixinJSBridgeReady", function () { 
            document.getElementById('car_audio').play(); 
            document.getElementById('video').play(); 
        }, false); 
    </script>

**有一些Android部分手机生效，部分手机不生效**

自动播放需要满足几个条件所有移动端手机都可以自动播放：

1.必须要有用户点击事件touch  
2.接收点击事件的标签和video标签不能是父子关系(就是body接收的点击事件调用video的play方法，播放器也是不会播放视频的  
3.接收点击时候后，立即执行play()方法，网络请求后调用play()方法可能会无效

## 解决方案 ##

### 思路 ###

在页面初始化话的时候写一个video标签，这个video标签在可见区域之外，video标签和需要点击事件控件不是父子关系，当用户点击播放按钮时，立刻调用play()方法。设置video标签的样式到可见区域内，通过z-index控制层级关系，就能实现自动播放。

[HTML_video]: https://www.cnblogs.com/belongs-to-qinghua/p/10950656.html