YNUtdPlatform/pages/YNEduApp/learn/components/VideoStudy.vue

<template>
  <view>
    <div class="video">
      <video
        id="myVideo"
        :src="videoUrl"
        :initial-time="videoInitialTime"
        :show-progress="false"
        :enable-progress-gesture="false"
        @error="videoErrorCallback"
        @timeupdate="videoTimeUpdate"
      />
    </div>

    <u-modal :show="showModal" title="提示" :content='content' showCancelButton @cancel="showModal = false" @confirm="handleEnd" />

    <div class="btn">
      <u-button type="primary" shape="circle" text="结束学习" size="small" @click="openModal" />
    </div>
  </view>
</template>

<script>
export default {
  props: {
    states: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      videoInitialTime: 0, // 初始播放时间
      // 当前播放时间
      currentTime: 0,
      videoUrl: '',
      content: '是否确认结束学习？',
      showModal: false
    }
  },
  mounted() {
    console.log('🚀 ~ mounted ~ this.states:', this.states)
    this.videoInitialTime = this.states.initialTime
    this.videoUrl = this.states.url
  },
  methods: {
    videoErrorCallback(e) {
      console.log('视频错误信息：', e)
    },
    // 视频播放时间更新
    videoTimeUpdate(e) {
      console.log('视频播放时间：', e.detail.currentTime)
      this.currentTime = Math.floor(e.detail.currentTime)
    },
    openModal() {
      this.showModal = true
    },
    // 结束学习
    handleEnd() {
      this.$verificationToken()
      this.showModal = false
      // 手动暂停视频
      const video = uni.createVideoContext('myVideo')
      video.pause()
      // 获取当前播放时间 - 用于记录学习时长
      console.log('当前播放时间：', this.currentTime)
      this.$emit('handleVideo', this.currentTime)
    }
  }
}
</script>

<style lang="scss" scoped>
// 隐藏 video 默认控制条
::v-deep .uni-video-controls {
  display: none !important;
}

.video {
  width: 100%;
  height: 260px;
  uni-video {
    width: 100%;
    height: 100%;
  }
}

.btn {
  margin: 60px auto;
  width: 100px;
}

::v-deep .u-modal__content {
  flex-direction: column;
  align-items: center;
}
</style>