uniapp带视频背景的登录页面

app上video是编译为原生的所以自定义组件无法覆盖在video上层，使用压窗屏解决

bg-video.vue

<template>
	<view class="login-box">
		
		<view class="video-background">
			<video src="@/static/login-video.mp4"
				object-fit="cover"
				:autoplay="true" 
				:controls="false" 
				:muted="true" 
				:loop="true" 
				id="videoRef"
				class="video">
			</video>
		</view>
	
	</view>
</template>

<script>
	export default {
		data(){
			return {
				VideoContext: {}
			}
		},
		onShow() {
            // 当app切到后台再切回前台的时候会触发onShow这个时候视频应该继续播放，不这样做视频会暂停的
			this.$nextTick(() => {
				this.VideoContext = uni.createVideoContext('videoRef');
				this.VideoContext.play()
			})
		}
	}
</script>

<style lang="scss">
	.login-box{
		position: relative;
		height: 100vh;
		overflow: hidden;
		.video-background{
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			.video{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>

subnvue.nvue

@touchmove.stop.prevent要加上，不然会导致触摸穿透

<template>
	<view class="login mark" @touchmove.stop.prevent>
        <!--登陆模块-->
	</view>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.login {
}
.mark {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
}
</style>

pages.json

subnvue页面会盖住bg-video页面 并且页面设置为透明，然后在subnvue页面写自定义组件

{
	"path": "pages/login/bg-video",
	"style": {
		"navigationStyle": "custom",
		"app-plus": {
			"subNVues": [{
				"id": "concat",
				"path": "/pages/login/subnvue",
				"style": {
					"position": "absolute",
					"top": "0",
					"bottom": "0",
					"left": "0",
					"right": "0",
					"background": "transparent"
				}
			 }]
		}
	}
},