<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
<video class="live-video" is-live autoplay src="" controls></video>
<view class="text">
操作流程:点video的全屏,再退出全屏,video出现层级错误,被logo图片和文本挡住
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '退出全屏后这段文本会挡住视频'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 50rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.live-video{
width: 750rpx;
height: 420rpx;
position: absolute;
left: 0;
top: 0;
}
.text{
margin-top: 100rpx;
}
</style>
![z***@dzpk.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/b758b9ff3dc79c44e634f0051ef3feb1.png)
- 发布:2023-06-19 16:40
- 更新:2023-06-20 06:45
- 阅读:494
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: 正式
HBuilderX版本号: 3.8.4
手机系统: iOS
手机系统版本号: iOS 14
手机厂商: 苹果
手机机型: iphone X
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
点video的全屏,再退出全屏,video出现层级错误,被logo图片和文本挡住
点video的全屏,再退出全屏,video出现层级错误,被logo图片和文本挡住
预期结果:
退出全屏后video不应该被挡住
退出全屏后video不应该被挡住
实际结果:
退出全屏后video被logo图片和文本挡住,层级出现错误
退出全屏后video被logo图片和文本挡住,层级出现错误
bug描述:
在ios自定义基座测试中,nvue页面video退出全屏后出现层级错误,会被其他元素挡住video。
已上传测试代码
![FullStack](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/000/73/57/99_avatar_mid.jpg?v=1717238592)
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866
帮助官方排查,确实存在这个问题
![LAO_WUUAN](https://img-cdn-tc.dcloud.net.cn/account/identicon/f247c0502a36f9028bba2d6c110ec756.png)
在 nvue 中,要实现 video 全屏播放,可以通过 uni-mpvue 使用 video 组件或者使用原生的 video 组件,而当 video 组件全屏播放时,可能会出现层级错误的情况。
这种情况的原因可能是因为 video 组件全屏播放时,其层级超出了 nvue 的层级限制,导致出现了层级错误。
解决这种问题的方法可以尝试通过以下两种方式实现:
-
在 video 全屏播放时,隐藏 nvue 组件并将其 z-index 设为 -1,在 video 播放结束或者退出全屏时再显示 nvue 组件并将其 z-index 设为 0。
-
使用原生的 video 组件,通过 NativeView 实现 video 全屏播放。同时注意,如果在原生组件中使用了视频控制条,还需要注意控制条与原生组件之间的层级关系。