uni-app video组件点击全屏播放时层级太高，无法将其他组件覆盖在全屏video上方

uni-app video组件点击全屏播放时层级太高，无法将其他组件覆盖在全屏video上方

操作步骤：

  1. 创建一个uniapp应用
  2. 写个video标签，然后在video标签里放个cover-view，在非全屏下正常盖在播放器上
  3. 点击全屏播放按钮后就无法盖住

预期结果：

能在全屏播放上

实际结果：

无法盖在全屏播放上

bug描述：

video在点击全屏播放的时候，层级太高，无法将组件覆盖在全屏播放的video上面； 使用cover-view 和subNVues可以盖在视频上面，一旦点击全屏就无法覆盖在视频上面。

3 回复

video 组件，若想在全屏模式下使用cover-view，只有在微信小程序、App端的nvue页面可实现。 详见文档注意事项：https://uniapp.dcloud.io/component/video

更多关于uni-app video组件点击全屏播放时层级太高，无法将其他组件覆盖在全屏video上方的实战教程也可以访问 https://www.itying.com/category-93-b0.html


但是nvue的video的标签在安卓上太丑了，而我没有全屏播放控件

这是一个常见的全屏播放器层级问题。在uni-app中，当video组件进入全屏模式时，其层级会被系统接管，导致常规的cover-view无法覆盖在其上方。

解决方案：

  1. 使用subNVues方案：这是官方推荐的解决方案。subNVues可以在全屏video上方创建原生子窗体，确保层级覆盖。
// 在pages.json中配置
{
  "path": "pages/video/video",
  "style": {
    "subNVues": [{
      "id": "overlay",
      "path": "pages/video/overlay",
      "type": "popup",
      "style": {
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "background": "transparent"
      }
    }]
  }
}

// 在页面中控制显示
const subNVue = uni.getSubNVueById('overlay');
subNVue.show();
回到顶部