app怎么解决video层级问题（uniapp)

在uniapp中，可以使用uni-mp-video组件来解决video层级问题。uni-mp-video是基于微信小程序video组件的封装，可以在H5、App、小程序等平台上使用。

uni-mp-video组件的使用方法如下：

1. 在需要使用的页面的json文件中引入uni-mp-video组件：

{
  "usingComponents": {
    "uni-mp-video": "/components/uni-mp-video/uni-mp-video"
  }
}

2. 在需要放置视频的位置，使用uni-mp-video组件：

<uni-mp-video src="视频地址"></uni-mp-video>

其中，src属性为视频的地址。

3. 在需要设置视频样式的位置，使用css样式来设置：

uni-mp-video {
  width: 100%;
  height: 100%;
}

通过上述步骤，就可以在uniapp中解决video层级问题了。需要注意的是，uni-mp-video组件只能用于播放本地视频或者外链视频，不能用于直播流等其他视频类型。

相关问题

app怎么解决video层级问题（uniapp)不使用uni-mp-video

在uniapp中，如果不想使用uni-mp-video组件，可以使用原生的video组件，通过在页面中引入原生组件，并在页面中注册组件来实现。具体步骤如下：

1. 在页面的json文件中声明使用原生组件：

{
  "usingComponents": {
    "video": "/path/to/native/video"
  }
}

2. 在页面中引入原生组件：

<video src="{{videoSrc}}" controls></video>

3. 在页面中定义原生组件并注册：

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {
    src: {
      type: String,
      observer: function(newVal, oldVal, changedPath) {
        if (newVal !== oldVal) {
          this.setData({
            videoSrc: newVal
          })
        }
      }
    }
  },
  data: {
    videoSrc: ''
  },
  methods: {
    onPlay: function() {
      // 播放视频
    },
    onPause: function() {
      // 暂停视频
    },
    onEnded: function() {
      // 视频播放结束
    },
    onError: function() {
      // 视频播放出错
    }
  }
})

在定义的原生组件中，通过properties定义了一个src属性，当这个属性发生变化时，会触发observer函数，将最新的src值保存到data中。在页面渲染完成后，通过setData将src值传递给video组件。

同时，原生组件中定义了一些事件回调函数，用于处理视频的播放、暂停、结束和出错等情况。在这些回调函数中，可以根据具体的业务逻辑进行处理。

以上就是使用原生组件实现视频播放的方法。需要注意的是，在使用原生组件时，需要根据具体的小程序平台进行兼容处理。

uniapp video层级过高

在uni-app开发的项目中，如果使用video标签设置视频做为页面背景，可能会出现video标签层级过高，导致页面中内容不展示的问题。针对这个问题，官方提供了三种解决办法：

1. 使用cover-view、cover-image代替video标签，这两个标签的层级比较低，不会遮挡页面中的其他内容。

2. 使用subNVues解决此问题。在pages.json中配置subNVues，将video标签放在subNVues中，这样就可以控制video标签的层级，避免遮挡其他内容。

3. 在video标签中添加z-index属性，将其层级调整到比其他内容低即可。