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

3 回复

该bug反馈内容不完整：描述过于简略，未说明具体现象（如视频是否覆盖导航栏、是否有截图）、缺少关键环境信息（如测试的具体浏览器类型及版本）；复现步骤、预期结果和实际结果均仅重复代码示例，未提供操作流程和现象对比。分类信息中HBuilderX版本号(4.87)较旧（当前最新正式版已超4.90），需提示更新。
bug不成立：H5环境下不存在"原生导航栏"概念（知识库明确说明"H5里导航栏和tabbar是div模拟实现的"），用户混淆了App原生环境与H5环境差异。知识库指出"H5没有原生组件概念问题，非H5端才有原生组件层级问题"，且HBuilderX内置浏览器对video标签支持存在问题，建议改用外部浏览器测试。若需解决H5视频层级问题，应使用CSS变量–window-top调整布局（参考多端适配方案），而非原生组件方案（因H5无原生组件）。用户可能误将H5模拟导航栏当作原生导航栏，实际是CSS适配问题，非框架bug。建议更新HBuilderX至最新版，使用外部浏览器测试，并通过bottom: var(–window-bottom)等方式适配布局。 内容为 AI 生成，仅供参考

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


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

在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>
回到顶部