uniapp 开屏视频 以及解决开屏视频播放前短暂白屏或黑屏的情况

uniapp 开屏视频 以及解决开屏视频播放前短暂白屏或黑屏的情况

1. 废话不多说 直接上代码

<template>
	<view class="">
		<video :style='{opacity: play }' :preferred-peak-bit-rate="284" :autoplay="true" :loop="true" object-fit='fill'
			class="video" id="videos" :enable-progress-gesture="true" :controls="false" @ended="" @play="onPlay"
			@timeupdate="videoEnd" :show-fullscreen-btn="true" @ended='goIndex' :src="videoUrl" :show-center-play-btn="false"
			@loadedmetadata="loadedmetadata">
		</video>
		<view class="btn" @click='goIndex'>跳过&nbsp;&nbsp;{{duration}}</view>
		<image  :style='{opacity: play==1?0:1 }' style="position: absolute;left: 0;top: 0; width: 100%;height: 100vh;"
			:src="videoData.videoAddress" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoUrl: '',
				videoData: {
					videoAddress: '',
					addressSort: 0
				},
				duration: "",
				play: 0,
				videoContext: null,
				recommendFn: null
			}
		},
		onLoad() {
            // 调用接口 获取 开屏视频  以及 占位图片
			this.getSwiper()
		},
		onShow() {
		   // 每次计入页面都接着上次倒计时继续
			if (!this.recommendFn && this.duration!=="") {
				this.recommendFn = setInterval(() => {
					if (this.duration >= 1) {
						this.duration = parseInt(this.duration) - 1
					} else {
						clearInterval(this.recommendFn)
						this.recommendFn = null
						this.goIndex()
					}
				}, 1000)
			}
		},
		onHide() {
		   // 页面隐藏时  停止计时
			clearInterval(this.recommendFn)
			this.recommendFn = null
		},
		methods: {
			getSwiper() {
                let that = this
                // 获取 开屏视频  以及 占位图片  和 倒计时
                // 更具自及的需要 也可直接写死
				that.$uniApi.dataRequestNoLoading('get', `base/app/v1/commonVideo/list`).then(res => {
				    // 视频url
					that.videoUrl = res.data[0].videoUrl
					// 图片url
					that.videoData.videoAddress = res.data[0].indexImgUrl
					// 倒计时
					that.duration = res.data[0].videoDuration
					// 开始倒计时
					if (!that.recommendFn) {
						that.recommendFn = setInterval(() => {
							if (that.duration >= 1) {
								that.duration = parseInt(that.duration) - 1
							} else {
								clearInterval(that.recommendFn)
								that.recommendFn = null
								// 倒计时结束后  跳转页面
								that.goIndex()
							}
						}, 1000)
					}
					that.videoEnd()
				}).catch(err => {
					
				})
			},
			loadedmetadata(e) {
				let that = this
				// 此处延时 就是为了解决白屏或黑屏的情况
				setTimeout(() => {
					that.play = 1
				}, 500)

			},
			goIndex() {
				uni.switchTab({
					url: '倒计时完成跳转到其他页面'
				})
			},
			onPlay() {
				let that = this
				// 此处延时 就是为了解决白屏或黑屏的情况
				setTimeout(() => {
					that.play = 1
				}, 500)
			},
			videoEnd(e) {
	
			}
		}

	}
</script>

<style>
	.video {
		width: 100%;
		height: 100vh;
	}

	.btn {
		width: 170rpx;
		height: 54rpx;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 30rpx;
		border: 1rpx solid #FFFFFF;
		font-family: Source Han Sans SC, Source Han Sans SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 30rpx;
		position: absolute;
		top: 240rpx;
		right: 22rpx;
		line-height: 54rpx;
		text-align: center;
		z-index: 10;
	}
</style>

2. 

3. ok 搞定！ 可直接用