uni-app vue和nvue的H5下 video也会存在层级问题 比原生导航栏还高

uni-app vue和nvue的H5下 video也会存在层级问题 比原生导航栏还高

示例代码：

<template>  
    <view style="padding-bottom: 1200px;" >  

        <video src="https://shop.tdtm999.com/staticFile/20260119170021417.mp4?poster=https://shop.tdtm999.com/staticFile/20260119170021527.jpg" controls></video>  
    </view>  
</template>  

<script setup>  

</script>  

<style lang="scss">  

</style>

操作步骤：

<template>  
    <view style="padding-bottom: 1200px;" >  

        <video src="https://shop.tdtm999.com/staticFile/20260119170021417.mp4?poster=https://shop.tdtm999.com/staticFile/20260119170021527.jpg" controls></video>  
    </view>  
</template>  

<script setup>  

</script>  

<style lang="scss">  

</style>

预期结果：

<template>  
    <view style="padding-bottom: 1200px;" >  

        <video src="https://shop.tdtm999.com/staticFile/20260119170021417.mp4?poster=https://shop.tdtm999.com/staticFile/20260119170021527.jpg" controls></video>  
    </view>  
</template>  

<script setup>  

</script>  

<style lang="scss">  

</style>

实际结果：

<template>  
    <view style="padding-bottom: 1200px;" >  

        <video src="https://shop.tdtm999.com/staticFile/20260119170021417.mp4?poster=https://shop.tdtm999.com/staticFile/20260119170021527.jpg" controls></video>  
    </view>  
</template>  

<script setup>  

</script>  

<style lang="scss">  

</style>

bug描述：

急急急！！！ vue和nvue的H5下，安卓和鸿蒙，video会存在层级问题，比原生导航栏还高
信息类别 信息内容
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Win11
HBuilderX类型 正式
HBuilderX版本号 4.87
浏览器平台 手机系统浏览器
浏览器版本 QQ浏览器最新版
项目创建方式 HBuilderX

示例图片


更多关于uni-app vue和nvue的H5下 video也会存在层级问题 比原生导航栏还高的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

这个是宿主浏览器自己添加的控件，默认情况下是没有 下载、浮窗功能的，换个浏览器就好了，这个是浏览器自己的功能，你可自行排除，这个不是 uniapp 的 bug

更多关于uni-app vue和nvue的H5下 video也会存在层级问题 比原生导航栏还高的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app的H5端，video组件确实存在层级问题。这是因为浏览器原生的video播放器在进入全屏或播放状态时，会脱离DOM层级控制，以系统最高层级显示。

问题原因：

  1. 浏览器原生的video播放器在播放时会进入独立渲染层
  2. 移动端浏览器对video组件的z-index控制有限
  3. 原生导航栏通常无法覆盖系统级video播放器

临时解决方案：

  1. 使用cover-view覆盖（仅部分有效）：
<video src="your-video.mp4" controls>
  <cover-view class="video-cover"></cover-view>
</video>

  1. 自定义播放器： 使用video.js、plyr等第三方播放器库替代原生video组件，这些库通常能更好地控制层级。

  2. 监听播放状态控制显示：

<template>
  <video 
    :src="videoSrc" 
    :controls="!isPlaying"
    @play="handlePlay"
    @pause="handlePause"
  ></video>
</template>

<script setup>
import { ref } from 'vue'

const isPlaying = ref(false)

const handlePlay = () => {
  isPlaying.value = true
  // 可以在这里隐藏导航栏
}

const handlePause = () => {
  isPlaying.value = false
  // 恢复导航栏显示
}
</script>
回到顶部