是，x5-playsinline在安卓微信中会强制置顶导致z-index失效；正确做法是移除该属性，仅保留x5-video-player-type="h5-page"并配合动态显隐控制。
video 标签在安卓微信里加了 x5-playsinline 反而更遮挡？
这是最常踩的坑：很多教程一上来就让加 x5-playsinline，结果在安卓微信（X5 内核）中视频直接升到最高层，z-index 完全失效，弹窗、导航栏、输入框全被盖住。
根本原因在于 X5 内核对 x5-playsinline 的实现逻辑和文档不一致——它不是“启用同层播放”，而是“强制接管并置顶”。实测去掉该属性后，z-index 才真正起作用。
- 必须移除
x5-playsinline（哪怕你同时写了x5-video-player-type="h5"） - 保留
x5-video-player-type="h5-page"或"h5"，这是开启同层播放的关键开关 -
webkit-playsinline="true"仅对 iOS Safari 有效，不影响安卓微信，可保留但非必需 - 避免混用
x5-playsinline和x5-video-player-type，二者冲突时前者优先劫持
为什么 z-index 在某些机型上完全没反应？
因为部分安卓浏览器（如小米、QQ、华为自带浏览器）会直接调用系统视频播放器，绕过 DOM 渲染层。此时 video 不再是普通 HTML 元素，z-index 失去控制权，CSS 层叠规则彻底失效。
这种情况下，任何样式调整都白搭，必须切换策略：
- 优先尝试用
x5-video-player-type="h5-page"+ 移除x5-playsinline组合，覆盖约 70% 场景 - 若仍失败（比如用户用的是旧版 QQ 浏览器），改用动态控制显隐：
v-if="showVideo"或video.style.display = 'none'，在弹窗/操作前主动隐藏 video 容器 - 不要依赖
position: relative+z-index去“压”原生 video，它不在同一个渲染平面
uniapp 中 video 遮挡 input/button 怎么办？
uniapp 的 <video></video> 在非 H5 端（App、小程序）默认是原生组件，层级天然高于所有 webview 内的普通组件，z-index 对它无效。
唯一可靠解法是使用官方提供的 <cover-view></cover-view>：
-
<cover-view></cover-view>必须是<video></video>的**直接子元素**，嵌套一层 div 就失效 - 只支持有限 CSS：
flex、padding、color、font-size等，不支持position、transform、background-image -
z-index在<cover-view></cover-view>内部有效，但不能用来“盖住” video 以外的其他原生组件（比如 map、camera） - H5 平台下
<cover-view></cover-view>不生效，需配合上述 H5 层级方案做平台判断
要不要用 VideoPlayer 插件替代原生 video？
当业务对弹层交互强依赖（如直播打赏、实时评论、表单提交），且兼容性要求覆盖老旧安卓浏览器时，可以考虑。
但要注意代价：
- 插件如
VideoPlayer（基于 MPEG-TS 解码）只支持 MP4/TS，不支持 WebM、AV1 等格式 - 需要额外加载
jsmpeg.min.js等资源，首屏性能下降明显 - 无法使用原生
controls，所有 UI（播放/暂停/进度条）得自己重写 - 部分机型解码卡顿，尤其低端安卓机，不如原生 video 稳定
多数项目没必要上插件——先确保 x5-video-player-type="h5-page" + 移除 x5-playsinline + 动态显隐三板斧用到位，已能解决 90% 的真实场景问题。真正难搞的，往往是那些连 X5 文档都没遵循的定制内核浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
