vue2项目实现多个视频列表自动循环播放 每个视频都播放完_vue 循环videoplayer

实例代码：

<template>
  <div>
    <video ref="videoPlayer" :src="currentVideo" autoplay controls @ended="playNextVideo"></video>
  </div>
</template>

 data() {
    return {
      videoList: [
        "视频地址1",
        "视频地址2",
        "视频地址3"
      ],
      // 视频下标的索引
      currentIndex: 0,
      // 定时器
      timer: null
    };
  },
  computed: {
    // 返回当前视频的信息。
    //访问videoList数组和currentIndex变量来获取当前视频的信息
    currentVideo() {
      // 视频的下标
      return this.videoList[this.currentIndex];
    }
  },
  mounted() {
    this.startPlayback();
  },
  destroyed() {
    clearTimeout(this.timer);
  },
  methods: {
    // 用于播放下一个视频
    playNextVideo() {
      // 当前视频的索引。它会递增1，表示要播放下一个视频。
      this.currentIndex++;
      /* 
      ，如果currentIndex超过了videoList中视频的数量，即currentIndex >= videoList.length，
      说明已经播放到了最后一个视频，此时将currentIndex置为0，表示重新从第一个视频开始播放。
      */
      if (this.currentIndex >= this.videoList.length) {
        this.currentIndex = 0;
      }
      // 获取视频标签
      const videoElement = this.$refs.videoPlayer
      // 把视频标签 里的 视频地址清空
      videoElement.src = ''
      // 添加事件监听器
      // ended 事件是 HTML5 视频元素（<video>）的一个事件，它在视频播放结束时触发。 可以实现 移动端自动循环播放
      videoElement.addEventListener('ended', () => {
        this.startPlayback()
      })
    },
    startPlayback() {
     // 取消定时器
      clearTimeout(this.timer)
      // 获取当前视频元素
      const videoElement = this.$refs.videoPlayer
      // 添加判断 如果里边没数据则重新加载 
      if (videoElement !== undefined) {
        videoElement.addEventListener('canplay', () => {
          this.timer = setTimeout(() => {
            this.playNextVideo()
          }, videoElement.duration * 1000)
          console.log('视频已加载完成')
        })
 
        // 清除原始源
        videoElement.src = ''
 
        // 在清除原始源后重新加载视频
        videoElement.load()
 
        // 在加载完成后播放视频
        videoElement.addEventListener('loadeddata', () => {
          videoElement.play()
        })
      } else {
        console.log('未找到视频元素')
      }
    }
};