taimed-international-app/components/ali-video/index.vue

<template>
  <view class="course-video">
    <view v-if="videoList.length > 0 && isfresh" class="video-player">
      <AudioPlayer
        v-if="currentVideo.type == 2"
        :audioList="videoList"
        :secondCountDown="secondCountDown"
        :videoTitle="course.courseTitle"
        :currentVideo="videoList[currentVideoIndex]"
        :coverImageUrl="cover"
        :http="http"
      />
      <VideoPlayer
				v-else
        ref="commonVideo"
        :secondCountDown="secondCountDown"
        :videoTitle="course.courseTitle"
        :currentVideo="videoList[currentVideoIndex]"
        :currentVideoList="videoList"
        @changeScreen="changeScreen"
        @changeScreenLoading="changeScreenLoading"
        @unlockChangeVideo="unlockChangeVideo"
        @startNextVideoCountDown="startNextVideoCountDown"
        @hideNextVideo="hideNextVideo"
      />
    </view>
    <view v-if="videoList.length > 0" :style="{height: currentVideo.type == 2 ? '420rpx' : '480rpx'}"></view>
    <view class="course-info">
      <view class="course-flag">视频教学</view>
      <view class="course-title">课程：{{ course.courseTitle || '' }}</view>
      <view class="chapter-title">章节：{{ course.chapterTitle || '' }}</view>
      <view v-if="videoList.length > 0" scroll-x="true" class="video-list">
        <view v-for="(v, i) in videoList" :class="`video_item ${currentVideo.id == v.id ? 'hot' : ''}`"
          @click="handleClick(v,i)">
          【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import VideoPlayer from './video.vue'
import AudioPlayer from './audio.vue'
export default {
  components: {
    VideoPlayer,
    AudioPlayer,
  },
  props: {
    course: {
      type: Object,
      default: () => {
        return {
          courseTitle: '',
          chapterTitle: '',
        }
      },
    },
    cover: {
      type: String,
      default: '',
    },
    videoList: {
      type: Array,
      default: () => [],
    },
    currentIndex: {
      type: Number,
      default: 0,
    },
    http: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    videoList: {
      handler(newVal, oldVal) {
        this.currentVideoIndex = this.currentIndex;
        this.isfresh = true;
        if (newVal.length > 0) {
          this.currentVideo = newVal[this.currentVideoIndex];
          this.initVideo()
        }
      },
      immediate: true,
    }
  },
  data() {
    return {
      currentVideoIndex: this.currentIndex,
      currentVideo: this.videoList[this.currentIndex] || {},
      isfresh: false,
      screenLoading: false,
      isFullScreen: false,
      changeVideoLock: false,
      secondCountDown: 10
    }
  },
  methods: {
    handleClick(v, i) {
      if (this.changeVideoLock) {
        uni.showToast({
          title: '操作太频繁了',
          icon: 'none',
        })
        return
      }
      this.currentVideoIndex = i;
      this.currentVideo = v;
      this.currentVideoId = v.id;
      this.initVideo();
    },
    getNumber(num) {
      if (num >= 10) {
        return num;
      } else {
        return `0${num}`;
      }
    },
    changeScreenLoading(status) {
      this.screenLoading = status;
    },
    changeScreen(status) {
      this.isFullScreen = status;
    },
    unlockChangeVideo() {
      this.changeVideoLock = false
    },
    startNextVideoCountDown() {
      this.secondCountDown = 10
      let that = this
      if (this.countDownTimer) {
        clearInterval(this.countDownTimer)
      }
      this.countDownTimer = setInterval(() => {
        this.secondCountDown -= 1
        if (this.secondCountDown == 0) {
          that.hideNextVideo()
          const prevIndex = this.currentVideoIndex
          const nextIndex = prevIndex + 1
          console.log('切换之前的播放index是', prevIndex);
          if (Array.isArray(this.videoList) && nextIndex < this.videoList.length) {
            this.currentVideoIndex = nextIndex
            console.log('切换之后的播放index是', this.currentVideoIndex);
            const nextVideo = this.videoList[this.currentVideoIndex]
            that.changeVideo(nextVideo)
          } else {
            console.log('没有下一个视频可自动播放');
          }
        }
      }, 1000)
    },
    hideNextVideo() {
      console.log('父组件收到了取消加载-------------------');
      clearInterval(this.countDownTimer)
      this.countDownTimer = undefined
    },
    initVideo() {
			this.changeVideoLock = true
			this.screenLoading = false;
			this.isfresh = false;
			this.$nextTick(() => {
				this.isfresh = true;
				setTimeout(() => {
          console.log('CourseVideo initVideo 调用 VideoPlayer.init，当前视频为：', this.currentVideo)
					this.currentVideo.type != 2 && this.$refs.commonVideo.init({
						currentVideo: this.currentVideo,
						currentVideoList: this.videoList,
					});
				}, 200);
        this.changeVideoLock = false
			});
		},
    changeVideo(data) {
      if (data.id != this.currentVideo.id) {
        this.isfresh = false;
        this.$nextTick(() => {
          this.currentVideo = data;
					this.initVideo()
          this.isfresh = true;
        });
      }
    },
  },
}
</script>
<style lang="scss" scoped>
// .course-video {
//   // padding-top: 400rpx;
// }
.video-player {
  position: fixed;
  left: 0;
  width: 100%;
  height: 400rpx;
  z-index: 1;
  background-color: #000;
}
.course-info {
  padding: 20rpx;
	background-color: #fff;
}
.course-flag {
  font-size: 40rpx; color: #3983FF;
  font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
  padding: 20rpx 0;
}
.course-title {
  font-size: 32rpx;
  line-height: 1.2;
  padding: 20rpx 0;
}
.chapter-title {
  font-size: 28rpx;
  line-height: 1.2;
  padding: 20rpx 0;
}
.video-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 0;
  margin-top: 10rpx;

  .video_item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #5188e5;
    border-radius: 10rpx;
    line-height: 1;
    border: 1px solid #5188e5;
    box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
    padding: 18rpx 20rpx;
    font-weight: bold;
    font-size: 28rpx;
  }

  .video_item:nth-child(4n) {
    margin-right: 0;
  }
}

.hot {
  background-color: #5188e5 !important;
  color: #fff !important;
}
</style>