弹窗 z-index 写到 9999 还是被视频盖住,视频画面浮在遮罩上面,iOS 正常,安卓微信里必现,视频区域也点不到关闭按钮。乍看像缓存或者权限的锅,追下去往往不是。

<video x5-video-player-type='h5-page'
  x5-video-player-fullscreen='false' src='...'></video>

追下去是这么回事:X5 内核的 video 是原生播放器层,层级高于所有 DOM 元素,z-index 管不到。默认不走同层播放。

「X5 视频层级」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。

权限不要一口气开到最大,先加到够用再往上试,范围小才好收。

具体做法是,给 video 加 x5-video-player-type 的同层播放属性;播放器容器设 position: relative 和固定宽高;弹窗打开时暂停视频 避免两层同时渲染;安卓微信里打开弹窗确认遮罩在最上层。

验收就看一点,弹窗打开后遮罩完整盖住视频区域,关闭按钮可以正常点击。

作者 9823189