admin管理员组

文章数量:1616423

一.背景

相信有不少同学在开发移动web端带视频的页面时，在部分浏览器上视频的显示层级最高，遮罩层，弹窗之类都被视频遮盖。

我觉得出现这种情况是因为使用了浏览器的播放器，和标准的h5video标签有比较大的区别。会出现这种情况的有：

安卓端: 微信内置浏览器，UC浏览器，QQ浏览器....等等

苹果端： 手头没有苹果设备.

[补充说明]: 文中用的是layer.js的弹窗组件

 

二.针对弹窗被遮挡的问题，探索的一些解决方法(非全屏的情况)

1.无法反抗被生活QJ，那就享受党的处理方式----在非视频显示的区域显示弹层：

在视频下方区域显示弹窗，完美解决（手动狗头）。

优点: 不会被遮挡，播放器无影响。

缺点: 受播放器的位置影响，播放器宽高占据全屏时无法显示。

效果截图：

2.我命由我不由天党的处理方式----显示弹窗时播放器或父容器样式设置display: none.：

原理说明：这个方法就是在需要弹窗的时候，将video或者是video父容器的样式设置display:none。

测试效果: 在安卓端微信浏览器，UC浏览器，QQ浏览器正常弹窗

<

本文标签： 层级视频遮挡解决方案web

版权声明：本文标题：移动web端视频层级最高，视频弹窗层被遮挡的解决方案探究 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728737135a1170989.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。