Android 上，因为各个软件使用的浏览器渲染引擎不一样，所以视频播放的效果差异也很大，这里主要以微信为主。微信使用的是腾讯浏览器自带的X5内核。
而iOS是不允许使用第三方浏览器内核的，就是Google Chrome也是用的系统内建的Webkit浏览器内核 (就是WebView了)，APP 都是使用的系统自带的浏览器进行页面渲染,所以IOS的微信浏览器是Chrome的webkit内核。
这就导致H5页面在android和iOS微信中的部分表现差异，但由于X5内核是腾讯基于开源Webkit优化的浏览器渲染引擎，所以除了对video标签的挟持，和下载页跳转被腾讯应用宝挟持外，其他表现上还没有遇到特别折磨人的差别。
1.视频播放自动全屏问题
这个问题在iOS和安卓下都有，浏览器默认全屏播放视频，解决办法很简单，给video加以下属性就可以解决：
playsinline="true"webkit-playsinline="true" //webkit内核x5-playsinline="true" //X5内核
2.音视频自动播放问题
在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放。
如果你用 javascript 代码显式调用play方法，你将会在控制台看到如下异常：Uncaught (in promise) DOMException。
这是因为，Chrome只允许用户主动对网页进行主动触发后才可自动播放音频和视频。
解决办法：利用微信提供的js API WeixinJSBridge
var video = document.getElementById("video");if (window.WeixinJSBridge) { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { video.play(); }, false);} else { document.addEventListener("WeixinJSBridgeReady", function () { WeixinJSBridge.invoke('getNetworkType', {}, function (e) { video.play(); }); }, false);}video.play(); 3.android下的视频同层播放问题
H5页面分享到微信上播放视频，最大的坑就是在Android手机上，X5浏览器会劫持Video标签用腾讯播放器弹出全屏播放，处于最上层，覆盖DOM元素，更可恶的是播放完毕时，会出现很多腾讯的广告视频。
其实上面提到的`x5-playsinline`属性也能一部分解决这个问题，但在自定义视频样式等情况下会导致视频尺寸、样式等各种各样的问题，其实腾讯浏览器提供了同层播放的解决办法，文档请戳：【https://x5.tencent.com/tbs/guide/video.html】
同层播放器的使用方式跟普通的video元素差别不大，只是需要加上两个X5的自定义属性：「x5-video-player-type」和「x5-video-player-fullscreen」。
属性说明：
`x5-video-player-type="h5"` 声明启用同层H5播放器
`x5-video-player-fullscreen` 是否全屏播放
`x5-video-orientation` 播放控制横竖屏， landscape 横屏, portraint竖屏，默认竖屏（此属性只在声明了x5-video-player-type=”h5”情况下生效）
有些情况下可能还会出现视频全屏播放有黑边的问题
解决办法：
`object-fit: cover` 这是一个css3属性，cover的意思是剧中填满并裁剪，它有一个特性，保证替换内容尺寸一定大于容器尺寸，并且宽度和高度至少有一个和容器一致，所以这个方法可能会导致视频内容展示不全。
官方对全屏播放的建议：
1. 监听resize事件实现自适应视口大小变化，视频播放时会调整视口大小
```javascript
window.onresize = function(){
video.style.width = window.innerWidth + "px";
video.style.height = window.innerHeight + "px";
}
```
2. 在视频播放期间的交互，弹框，字幕在视频视频区域中，不要在视频区域外
3. 对于直播类全屏视频，最好不要在最顶部放交互性元素