思路

1. 页面中创建两个 video 标签
2. 在组件加载时同时加载两个视频资源(autoplay)，暂时不播放的视频在 canplay 事件中调用暂停方法，使之实现预加载
3. 使用绝对定位将预加载的视频移出可视窗口
4. 第一个视频结束后，通过 ended 事件播放之前预加载的视频，同时将当前 src 切换为下一个需要播放的视频地址，完成缓存

核心代码

        <video ref="video" :class="{'video-hide':!playVideoTag}" autoplay @ended="onEnded('video')"></video>
        <video ref="video1" :class="{'video-hide':playVideoTag}" autoplay @ended="onEnded('video1')"></video>

data() {
        return {
          srcList: [],
          curIndex: 0,
          playVideoTag: true, // 当前播放的 ref 是否为 video
          canPlayNext: true   // 是否存在下一个播放地址
        }
      },

        onEnded(e) {
          if (this.canPlayNext) {
            const video = e === 'video' ? this.$refs.video1 : this.$refs.video
            video.play()
            this.playVideoTag = !this.playVideoTag
            this.loadNext()
          }
          console.log('onended my video')
          this.$emit('ended')
        },
        playVideo(src) {  // 可以接受单个 url 和 url 列表
          this.srcList = typeof src === 'string' ? [src] : src
          this.$refs.video.src = src[0]
          this.srcList = src
          this.loadNext()
        },
        loadNext() {
          const video = this.playVideoTag ? this.$refs.video1 : this.$refs.video
          if (this.srcList.length - 1 === this.curIndex) { // 当前索引是列表的最后一个
            console.log('没有新视频')
            this.canPlayNext = false
            return
          }
          video.src = this.srcList[++this.curIndex]  video.addEventListener('canplay', e => e.target.pause(), { once: true })
        }

.video-hide{  position: absolute;  top: -10000px;  left: -10000px;} 

本文转载自：https://blog.csdn.net/qq1154479896/article/details/106817240