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属