研究大佬--video在微信浏览器下的层级过高问题(安卓:小米出现的问题)

还是上一篇的那个视频页面,真的是很烦

需求:这次需要判断网络状况,当非wifi状态下(即4g)出现提示弹框《当前处于移动数据网络》

设备:iphone7plus,ipad4,iphone5,安卓(小米),微信开发者工具

涉及元素及属性:div, 模态框,display,js

视频格式:mp4

问题:在除安卓设备(小米)以外,其他设备提示弹框正常渲染;安卓(小米)也会被渲染,但是被video遮挡

(这是我将视频大小调整后,发现隐藏在video标签下瑟瑟发抖的模态框)

分析:z-index都无法控制video的层级(父标签z-index:0重置后,给video-1,模态框9999)根本没效果,查看一些资料,发现大家都有这个问题,在微信小程序下,微信浏览器下,安卓设备中video层级过高,(和canvas,img都是层级较高),一些人解决方法用h5同级播放一些我没见过的代码(自行百度),然而没什么用。其实对于安卓机,腾讯已经有了提示弹框(对于使用移动数据网络),苹果机是没有的,因为需求在所以必须要写自己的提示弹框

解决方案:于是我就给video和模态框同级显示,用js判断,当安卓设备时,video隐藏,模态框显示,最后再控制video出现

代码如下:

 

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页