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"
}
}]
}
}
},