uniapp 开屏视频 以及解决开屏视频播放前短暂白屏或黑屏的情况
- 废话不多说 直接上代码
<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'>跳过 {{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 = nullthis.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 => {// 视频urlthat.videoUrl = res.data[0].videoUrl// 图片urlthat.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>
-
-
ok 搞定！ 可直接用
