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

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

1、ios:

只需要添加属性：

x5-playsinline playsinline webkit-playsinline

即可解决。例：

2、安卓微信内置浏览器

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

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

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

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