用代码如何实现uniapp 视频全屏播放,判断两次播放的视频是否相同,不同则先退出上一个全屏状态,在执行下一个全屏状态
时间: 2024-02-18 11:59:02 浏览: 112
以下是一个示例代码,可以实现uniapp 视频全屏播放,判断两次播放的视频是否相同,不同则先退出上一个全屏状态,在执行下一个全屏状态:
```
<template>
<view>
<video :src="videoUrl" @fullscreenchange="onFullscreenChange"></video>
</view>
</template>
<script>
export default {
data() {
return {
videoUrl: '', // 当前播放的视频 URL
isFullscreen: false, // 是否全屏
currentTime: 0, // 当前播放时间
isPlaying: false // 是否正在播放
}
},
methods: {
// 判断两次播放的视频是否相同
isSameVideo(url) {
return this.videoUrl === url
},
// 退出全屏状态
exitFullscreen() {
if (this.isFullscreen) {
uni.exitFullscreen()
this.isFullscreen = false
this.currentTime = this.$refs.video.currentTime
this.isPlaying = !this.$refs.video.paused
}
},
// 进入全屏状态
enterFullscreen() {
if (!this.isFullscreen) {
this.$refs.video.currentTime = this.currentTime
if (this.isPlaying) {
this.$refs.video.play()
}
uni.showNavigationBarLoading()
uni.showLoading({
title: '正在进入全屏'
})
uni.setFullscreen({
direction: 'landscape'
}).then(() => {
uni.hideNavigationBarLoading()
uni.hideLoading()
this.isFullscreen = true
}).catch(() => {
uni.hideNavigationBarLoading()
uni.hideLoading()
})
}
},
// 全屏状态改变事件
onFullscreenChange(event) {
if (event.detail.fullScreen) {
this.enterFullscreen()
} else {
this.exitFullscreen()
}
},
// 播放视频
playVideo(url) {
if (this.isSameVideo(url)) {
if (!this.isFullscreen) {
this.enterFullscreen()
}
} else {
this.videoUrl = url
this.exitFullscreen()
setTimeout(() => {
this.enterFullscreen()
}, 500)
}
}
}
}
</script>
```
在代码中,我们先定义了一个 data 对象,其中包含当前播放的视频 URL,是否全屏等状态。然后,我们定义了 isSameVideo 方法,用于判断两次播放的视频是否相同;exitFullscreen 方法,用于退出全屏状态;enterFullscreen 方法,用于进入全屏状态;onFullscreenChange 方法,用于处理全屏状态改变事件;playVideo 方法,用于播放视频并判断是否需要进入全屏状态。
我们在播放视频时,先调用 isSameVideo 方法判断两次播放的视频是否相同,如果相同,则直接进入全屏状态;如果不同,则先退出上一个全屏状态,等待一段时间后再进入下一个全屏状态。在退出全屏状态时,我们记录了当前的播放时间和播放状态,以便在重新进入全屏状态时恢复之前的状态。
阅读全文