微信内置浏览器video标签自动全屏播放以及层级过高问题

今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话。发现部分机型(华为P40 pro,oppo reno,iphone7p)上点击播放视频后,视频自动全屏播放,页面其他元素无法显示。探索良久,找出如下解决方案:

1、ios:

只需要添加属性: 

x5-playsinline playsinline webkit-playsinline

即可解决。例:

<video src="视频地址" poster="视频封面" controls x5-playsinline playsinline webkit-playsinline></video>

2、安卓微信内置浏览器

经过查阅相关资料,安卓微信内置浏览器内核为x5,使用该内核的浏览器还有手机QQ、京东等app的内置浏览器,仅添加上述属性,可以解决自动全屏播放的问题,但是会导致新的问题:video标签的层级过高,导致其他组件被遮挡,此时设置z-index属性无效。需要添加如下的属性即可解决。

x5-video-player-type="h5-page"

非专业前端人员,如有问题或者其他思路,请给出建议。

另外,小米8的微信打开视频,不添加以上任何属性,没有任何问题,也很疑惑。麻烦大神帮忙解答一下,感谢。

猜你喜欢

转载自blog.csdn.net/paopao180/article/details/108628825