<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
- 发布：2023-06-19 16:40
- 更新：2023-06-20 06:45
- 阅读：678
产品分类： 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 - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
帮助官方排查，确实存在这个问题
在 nvue 中，要实现 video 全屏播放，可以通过 uni-mpvue 使用 video 组件或者使用原生的 video 组件，而当 video 组件全屏播放时，可能会出现层级错误的情况。
这种情况的原因可能是因为 video 组件全屏播放时，其层级超出了 nvue 的层级限制，导致出现了层级错误。
解决这种问题的方法可以尝试通过以下两种方式实现：
-
在 video 全屏播放时，隐藏 nvue 组件并将其 z-index 设为 -1，在 video 播放结束或者退出全屏时再显示 nvue 组件并将其 z-index 设为 0。
-
使用原生的 video 组件，通过 NativeView 实现 video 全屏播放。同时注意，如果在原生组件中使用了视频控制条，还需要注意控制条与原生组件之间的层级关系。
