englishread-front/pages/components/VideoPopup.vue

<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>