uni-app 微信小程序 首页开屏视频demo效果（整理）

<template>
	<view class="enter">
		<view class="rabbitBox">
			<video src="https://system.lyyouyue.com/video/16823231853311120.mp4" class="full-page-video-horizontal"
				autoplay="true" :controls="false" :show-fullscreen-btn="false" :show-play-btn="false"
				:show-center-play-btn="false" :show-loading="false" :enable-progress-gesture="false"
				:vslide-gesture-in-fullscreen="false" @ended="videoEnd" @error="videoEnd" loop></video>
		</view>

		<!-- <image src="../static/img/logo.png" mode=""></image> -->
	</view>
</template>

<script>
	export default {
      
      
		components: {
      
      

		},
		data() {
      
      
			return {
      
      
				rabbitShow: false,
			}
		},
		// 侦听器
		watch: {
      
      

		},
		// 计算属性
		computed: {
      
      

		},
		created() {
      
      

		},
		// 页面加载
		onLoad(e) {
      
      

		},
		// 页面显示
		onShow() {
      
      

		},
		// 方法
		methods: {
      
      
			// 视频结束
			videoEnd() {
      
      
				this.rabbitShow = false
				uni.setStorageSync('rabbitShow', true)
			},

		},
		// 页面隐藏
		onHide() {
      
      

		},
		// 页面卸载
		onUnload() {
      
      

		},
		// 触发下拉刷新
		onPullDownRefresh() {
      
      

		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
      
      

		},
	}
</script>

<style lang="scss" scoped>
	.enter {
      
      
		width: 100%;
		height: 100vh;

		.rabbitBox {
      
      
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			z-index: -1;

			.full-page-video-horizontal {
      
      
				width: 100%;
				height: 100%;
				z-index: 1002;
			}
		}
	}
</style>