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>
webkit-playsinline和playsinline 规定视频播放时局域播放,不脱离文档流,这一属性需要是嵌入app或者webview之类的h5才会有效
x5-playsinline="" 在X5内核中让video标签播放不自动全屏,这也是解决大部分问题的核心代码