video在各版本ios和安卓上面表现形式都有所区别，为了解决这一问题我在网上找了许多方法，也亲自尝试了一些。

这里，提供一个简单而又能解决大部分移动端兼容的方式：

 

给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"

<video id="mpVideo" width="100%" height="100%" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
    src="{{{data.src}}}" controls="controls" preload="auto" poster="">
    您的手机不支持该视频文件！！！
</video>

 

1.  webkit-playsinline和playsinline   

这个属性作用是让视频播放时局域播放（不全屏，在原有位置上播放），不脱离文档流 。

但这个属性需要嵌入网页的APP比如WeChat中UIwebview 的allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES，才能生效。

换句话说，安卓不支持，而IOS的wechat却支持，因为APP不支持playsinline，所以安卓是默认全屏播放的。

2.  x5-playsinline=""　

在X5内核中让video标签播放不自动全屏，这也是解决大部分安卓手机兼容问题的核心代码。

3.  x-webkit-airplay="true" 　

把当前的视频投放到其他支持此技术的设备上。

4.  x5-video-player-type='h5'

启用同层H5播放器，学名叫沉浸式播放。播放的时候除去了control和微信的导航栏，只留下"X"和"<"两键，目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS。

至于为什么同层播放只对安卓开放，是因为安卓不能像ISO一样局域播放，默认的全屏会使得一些界面操作被阻拦，如果是全屏H5还好，但是做直播的话，诸如弹幕那样的功能就无法实现了，所以这时候同层播放的概念就解决了这个问题。

不过在测试的过程中发现，不同版本的ISO和安卓效果略有不同。

5.  video加上object-fit: fill;

style属性：解决Android的微信里面出现上下有黑边，不能全屏的问题。

6.  WeixinJSBridgeRead和wx.ready

微信浏览器下实现自动播放：   

document.addEventListener("WeixinJSBridgeReady", function() {
    video.play()
}, false)

 

说道这里稍微详细的说下h5的自动播放

目前而言h5完全实现自动播放，只有在ios11及以上版本才是支持的，部分安卓可以通过触摸的方式来实现半自动播放，而更多的安卓和ios更需要的是点击某一区域的交互方式来实现所谓的自动播放

出于点击才能触发的原因，大部分实现安卓半自动播放的交互都是进入页面弹出友好提示弹框提醒用户WiFi环境播放之类的，让用户点击确认按钮触发播放

如果微信jsapi完成了config配置，你可能会用到以下代码：

html：

<div style="width: 100%; height: 100%;" {{{if !data.src}}} class="no-resources" {{{else if !!data.src}}} class="video-box" {{{/if}}}>
  <video id="mpVideo" width="100%" height="100%" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"
    src="{{{data.src}}}" controls="controls" preload="auto" poster="" data-autoplay="{{{data.autoplay}}}">
    您的手机不支持该视频文件！！！
  </video>
</div>

 

if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  _video[0].play();
} else {
  if (document.addEventListener) {
    document.addEventListener("WeixinJSBridgeReady", function() {
      _video[0].play();
    }, false);
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", function() {
      _video[0].play();
    });
    document.attachEvent("onWeixinJSBridgeReady", function() {
      _video[0].play();
    });
  }
}

var play = function () {
  console.log('touchstart-video')
  _video[0].play();
  document.removeEventListener('touchstart',play,false);
};
document.addEventListener('touchstart',play,false);

setTimeout(function () {
  try { _video[0].play(); } catch (err) { console.error(err) };
  if (window.wx) {
    // 兼容微信自动播放
    wx.ready(function () { _video[0].play(); });
  }
},500)

　　

这一块还有许多知识没能了解到，希望大家能留言备注，一起完善