uni-app video全屏层级高的问题

uni-app video全屏层级高的问题

uni-app怕坑记一 关于视频全屏层级太高

由于抖音啥的火起来后，越来越多的设计喜欢设计这种视频上面有操作按钮的产品了。感到头痛。。。。

如果你想做出这种效果，我劝你直接嵌入nvue页面吧，不用再做那些无用的尝试了，毕竟我也是这样过来了的，好的上代码。

<template>
	<div>
		<video class="content" id="myVideo" ref="myVideo" src="http://image.tritonsh.com/ca16d3755dc1e109df0780cfc74ac932.mp4" enable-danmu danmu-btn controls >
			<!-- <div class="slide"> -->
				<div class="slideWrap" v-if="show" >
					<div class="view1"><text class="slideText">老师画面</text></div>
					<div class="view1"><text class="slideText">学生画面</text></div>
					<div class="view1 active" ><text class="slideText activeText">电脑画面</text></div>
				</div>
			<!-- </div> -->
			<!-- <div> -->
				<div class="avatar" v-if="show" >
					<image class="avatar-image" src="../../static/HM-shophome/category-img/10.png" mode=""></image>
				</div>
				<div class="aiPk"  v-if="show" >
					<image class="aiPkimage" src="../../static/img/player/person.png" mode=""></image>
					<text class="texts">AI评课</text>
				</div>
				<div class="modelStar"  v-if="show" >
					<image class="modelStarimage" src="../../static/img/player/star.png" mode=""></image>
					<text class="texts">500</text>
				</div>
				<div class="commit items"  v-if="show"  >
					<image class="commitimage" src="../../static/img/player/commit.png" mode=""></image>
					<text  class="texts">200</text>
				</div>
				<div class="share items" @click="share"  v-if="show" >
					<image class="shareimage" src="../../static/img/player/share.png" mode=""></image>
				</div>
				<div class="modelPk items"  v-if="show" >
					<image class="modelPkimage" src="../../static/img/player/goto.png" mode=""></image>
				</div>
			<!-- </div> -->
		</video>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				ctx:null,
			}
		},
			
		onLoad:function(){
		},
		methods: {
		
		}
	}
</script>

<style >
	.content{
		margin:0 auto;
	}
	.avatar-image{
		width:40px;
		height:40px;
	}
	.aiPkimage{
		width:28px;
		height:30px;
	}
	.modelStarimage{
		width:31px;
		height:32px;
	}
	.commitimage{
		width:31px;
		height:31px;
	}
	.shareimage{
		width:30px;
		height:24px;
	}
	.modelPkimage{
		width:40px;
		height:49px;
	}
	/* .items{
		
		float:right;
		text-align:right; 
		background:rgba(0,0,0,0.2);
		color:#FFFFFF; 
		top:30px;
		
	 } */
	
	 .texts{
		 /* position:absolute; */
		 color:#fff;
		 font-size:14px;
		 text-align:center;
		 bottom:0;
		 width:54px;
		 margin-left:-12%;
		 
		 /* left:10%; */
	 }
	.avatar{
		position:absolute;
		right:0;
		top:60px;
		width:54px;
		height:54px;
		background-color:rgba(0,0,0,0.2);
		padding:7px;
	}
	.aiPk{
		position:absolute;
		right:0;
		top:120px;
		width:54px;
		height:54px;
		padding:2px 14px;
		/* margin:0 14px; */
		background-color:rgba(0,0,0,0.2);
		/* background-color:#fff; */
		border:1px solid #fff;
	}
	.modelStar{
		position:absolute;
		right:0;
		top:180px;
		width:54px;
		height:54px;
		padding:3px 11px;
		background-color:rgba(0,0,0,0.2);
	}
	.commit{
		position:absolute;
		right:0;
		top:240px;
		width:54px;
		height:54px;
		padding:3px 11px;
		background-color:rgba(0,0,0,0.2);
	}
	.share{
		position:absolute;
		right:0;
		top:300px;
		width:54px;
		height:54px;
		padding:12px 15px;
		background-color:rgba(0,0,0,0.2);
	}
	.modelPk{
		position:absolute;
		right:0;
		top:360px;
		width:54px;
		height:54px;
		padding:3px 7px;
		background-color:rgba(0,0,0,0.2);
	}

	.view1{
		flex:1;
	}
	
	.active{
		background-color:#fff;
	}
	.slideWrap{
		height:25px;
		width:246px;
		border:1px solid #fff;
		border-radius: 10px;
		font-size:26px;
		position:absolute;
		background:#fff;
		flex-direction:row;
		border-color: #fff;
		border-width:1px;
		/* left:-50%; */
		transform: translateX(50%);
		
	}
	.slideText{
		color:#fff;
		font-size:14px;
		text-align:center;
		line-height:23px;
	}
	.activeText{
		color:#000;
	}

</style>

可能你觉得麻烦，但是确实是你的图标外面多一个层级他都不显示，你说气人不。所以没办法，只能这样做了