You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.3 KiB
113 lines
2.3 KiB
<template>
|
|
<uv-popup
|
|
ref="videoModal"
|
|
title="视频播放"
|
|
:show-cancel-button="false"
|
|
:show-confirm-button="false"
|
|
:close-on-click-overlay="true"
|
|
:safeAreaInsetBottom="false"
|
|
@close="handleClose"
|
|
>
|
|
<template #default>
|
|
<view class="video-container">
|
|
<video
|
|
v-if="currentVideo"
|
|
:src="currentVideo"
|
|
controls
|
|
autoplay
|
|
:show-fullscreen-btn="true"
|
|
:show-play-btn="true"
|
|
:show-center-play-btn="true"
|
|
style="width: 100%; height: 400rpx; border-radius: 8rpx;"
|
|
@error="onVideoError"
|
|
@play="onVideoPlay"
|
|
@pause="onVideoPause"
|
|
></video>
|
|
<view v-else class="video-loading">
|
|
<text>视频加载中...</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</uv-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'VideoPopup',
|
|
data() {
|
|
return {
|
|
currentVideo: ''
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开视频弹窗
|
|
open(videoUrl) {
|
|
if (videoUrl) {
|
|
this.currentVideo = videoUrl
|
|
this.$refs.videoModal.open()
|
|
} else {
|
|
uni.showToast({
|
|
title: '视频地址无效',
|
|
icon: 'error'
|
|
})
|
|
}
|
|
},
|
|
|
|
// 关闭视频弹窗
|
|
close() {
|
|
this.$refs.videoModal.close()
|
|
this.currentVideo = ''
|
|
},
|
|
|
|
// 处理弹窗关闭事件
|
|
handleClose() {
|
|
this.currentVideo = ''
|
|
this.$emit('close')
|
|
},
|
|
|
|
// 视频错误处理
|
|
onVideoError(e) {
|
|
console.error('视频播放错误:', e)
|
|
uni.showToast({
|
|
title: '视频播放失败',
|
|
icon: 'error'
|
|
})
|
|
this.close()
|
|
this.$emit('error', e)
|
|
},
|
|
|
|
// 视频开始播放
|
|
onVideoPlay() {
|
|
console.log('视频开始播放')
|
|
this.$emit('play')
|
|
},
|
|
|
|
// 视频暂停
|
|
onVideoPause() {
|
|
console.log('视频暂停播放')
|
|
this.$emit('pause')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.video-container {
|
|
position: relative;
|
|
width: 90vw;
|
|
|
|
.video-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 400rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 8rpx;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
</style>
|