如何控控制uniapp中video视频控制条的层级

可以使用 CSS 属性 `z-index` 来控制视频控制条的层级。具体实现步骤如下：

1. 在 `video` 标签中添加 `controls` 属性，开启浏览器默认的控制条。
2. 在 CSS 中为控制条添加 `z-index: 1;`，将其层级设为 1。
3. 如果有其他元素需要覆盖在控制条上方，可以为这些元素添加更高的 `z-index` 值。

示例代码如下：

<template>
  <video src="video.mp4" controls></video>
  <div class="overlay"></div>
</template>

<style>
video {
  z-index: 0;
}

video::-webkit-media-controls {
  z-index: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* 其他样式 */
}
</style>

在上面的示例中，`.overlay` 元素会覆盖在视频控制条上方，因为它的 `z-index` 值设为 2，比控制条的 1 更高。注意，需要针对不同浏览器的控制条元素设置不同的 CSS 选择器，这里使用了 `-webkit-` 前缀来匹配 Safari 和 Chrome 浏览器。

相关问题

uniapp中video标签层级过高

在uniapp项目中，如果video标签的层级过高，会导致页面滑动时可能会遮挡顶部导航栏或弹窗效果。解决这个问题可以使用subNVues进行配置。在pages.json文件中，可以通过以下配置来解决这个问题：
{
"path": "pages/index/index",
"style": {
...
}
}

此外，如果要创建一个预览图片并添加点击事件，可以使用以下代码：
<image src="@/static/image/bofang.png" alt="" style="width: 350rpx; height: 280rpx; position: relative;" @click="onIsVideo(videoSrc)">

如果要创建一个用于预览的video标签，可以使用以下代码：
<video :src="onVideoSrc" x5-video-player-type="h5-page" :autoplay='true' v-show="false" style="width: 100vw; height: 100vh;" id="video_play"></video>

另外，在js代码中，可以通过以下代码来处理点击事件并解决视频遮挡的问题：
onIsVideo(src){
// 获取视频地址
this.onVideoSrc = src
// 获取video上下文对象
this.videoContext = uni.createVideoContext('video_play');
// 进入全屏状态
this.videoContext.requestFullScreen();
}
以上是解决uniapp中video标签层级过高问题的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp video视频层级过高 遮挡顶部导航 页面弹窗 使用原生子窗体解决问题](https://download.csdn.net/download/weixin_42216995/87842998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [解决 uniapp video视频组件层级过高，预览会覆盖其他组件的问题。](https://blog.csdn.net/haliboti/article/details/121927980)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

uniapp video层级太高

你好！对于UniApp中的视频层级问题，您可以尝试使用z-index属性来调整视频组件的层级。通过将视频组件的z-index设置为一个较高的值，您可以确保它位于其他组件之上。请注意，该属性在使用绝对定位或固定定位时才生效。

您可以在视频组件所在的页面或组件中的style标签中添加如下代码来设置z-index属性：

<video class="video" style="z-index: 999;"></video>

这里将z-index设置为999，您可以根据实际需求进行调整。请确保设置的值足够高以确保视频组件置于其他组件之上。

希望能对您有所帮助！如有更多问题，请随时提问。