video移动端兼容问题

Posted 2021-03-26 qlongbg

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标签播放不自动全屏，这也是解决大部分问题的核心代码