uni-app 微信小程序 首页开屏视频

小程序需要来一个过年祝福视频开头,废话不多说直接上代码

1.HTML代码
这里的视频地址最好让后台给你提供,这样不需要我们每次发版,然后判断是否展示也让后台一起返回也能自动化控制,毕竟后台发版比我们快很多

<view class="rabbit-box" v-if="rabbitShow">
			<video
				src="src"
				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"></video>
		</view>

2.js代码
这里就是播放结束,或者播放错误的时候 把视频给隐藏 不显示

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

3.css代码

	.rabbit-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999;
		.full-page-video-horizontal {
			width: 100%;
			height: 100%;
			z-index: 1002;
		}
	}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值