<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>
1***@qq.com
- 发布：2026-01-20 02:15
- 更新：2026-01-20 02:16
- 阅读：10
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win11
HBuilderX类型： 正式
HBuilderX版本号： 4.87
浏览器平台： 手机系统浏览器
浏览器版本： QQ浏览器最新版
项目创建方式： HBuilderX
示例代码：
操作步骤：
<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>实际结果：
<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会存在层级问题，比原生导航栏还高
Ask小助手 - Ask社区AI助手
该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 生成，仅供参考
