video多少视频切换思路后———实现，流畅

组件实现 

<template>
  <div class="video-bk">
    <video v-for="(item,index) in videoList"
           :ref="item.index"
           :key="item.index"
           :class="{'show':item.index == videoIndex, 'hide': item.index != videoIndex}"
           :src="item.url"
           autoplay="false"
           webkit-playsinline="true"
           playsinline="true"
           x-webkit-airplay="allow"
           x5-video-player-type="h5"
           x5-video-player-fullscreen="true"
           x5-video-orientation="portraint"
           style="object-fit:fill"
           @canplay="canplay($event,item)"
           @ended="ended($event,item)" />

  </div>
</template>
<script>
export default {
  name: "VideoListPlay",
  props: {
    nextIndex: {
      type: String,
      default: "",
    },
    loop: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      // percentage: 0,
      videoNum: 0,
      // colors: [
      //   { color: "#f56c6c", percentage: 20 },
      //   { color: "#e6a23c", percentage: 40 },
      //   { color: "#5cb87a", percentage: 60 },
      //   { color: "#1989fa", percentage: 80 },
      //   { color: "#6f7ad3", percentage: 100 },
      // ],
      videoIndex: "1_1",
      overVideoList: [],
      videoList: [
        {
          url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-22/d560d1ac-3f3b-4e57-9e58-8c855578683e.mp4",
          describe: "默认视频1",
          index: "0_1"  ,
        },
        {
          url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/4271f726-16a2-4aa2-a34d-f2f8816fd1aa.mp4",
          describe: "默认视频2",
          index: "2_1",
        },
        {
          url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/5f6db006-4166-4497-8795-578f212d4b3c.mp4",
          describe: "默认视频3",
          index: "3_1",
        },
        {
          url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/ee7feb40-7f1b-4939-8bfe-9515276e8f02.mp4",
          describe: "默认视频4",
          index: "4_1",
        },
        {
          url: "自己去找视频/admin/app/dp-nginx/filestorage/2022-04-29/eec01134-8c73-4112-a7ef-e394492d3a46.mp4",
          describe: "默认视频5",
          index: "5_1",
        },
      ],
      myvideo: null,
      url: "",
    };
  },
  watch: {
    nextIndex: {
      handler(val) {
        if (val) {
          this.videoIndex = val.split("_time")[0];
          if (this.overVideoList.includes(this.videoIndex)) {
            this.$nextTick(() => {
              this.$refs[this.videoIndex][0].pause();
              this.$refs[this.videoIndex][0].play();
            });
          } else {
            this.$nextTick(() => {
              this.overVideoList.push(this.videoIndex);
              this.$refs[this.videoIndex][0].play();
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.percentage = 0;
    this.videoNum = 0;
  },
  mounted() {
    console.log("初始化");
    // setTimeout(() => {
    //   this.$refs["1_1"][0].play();
    // }, 1000);
  },
  destroyed() {},
  methods: {
    ended(e, item) {
      const that = this;
      this.$emit("ended");
      console.log(item.describe + "播放完成");
    },
    canplay(e, item) {
      ++this.videoNum;
      // this.percentage = (this.videoNum / this.videoList.length) * 100;
      // this.$emit("canplay");
      if (this.videoIndex <= this.videoList.length) {
        e.target.pause();
      }
      console.log(item.describe + "预加载完成");
      if (this.videoNum == this.videoList.length) {
        this.$refs[this.videoIndex][0].play();
      }
    },
    // 视频播放时间
    updateTime() {
      const s = this.$refs.video.currentTime; // 获取当前播放时间
      console.log(s + "=======获取当前播放时间");
    },
    pause() {
      console.log("暂停");
      this.myvideo.pause();
    },
    // 视频播放
    play() {},
  },
};
</script>
<style lang="scss" scoped>
.video-bk {
  position: absolute;
      width: 1920px;
    height: 1080px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background:url(./img/bg.png) no-repeat center;
  block-size: 1920px 1080px;
  .progress-show {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
  }
  video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1920px;
    height: 1080px;
    &.show {
      visibility: visible;
    }
    &.hide {
      visibility: hidden;
    }
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        z-index: ($i + 1);
      }
    }
  }
}
</style>

 修改后gif+背景视频+音频（代码中视频替音频）实现播放

<template>
  <div class="video-bk">
    <video class="bk"
           src="../../../assets/msw/video/backgorund.mp4"
           loop
           autoplay />
    <StatusShow />
    <video v-for="(item,index) in videoList"
           :ref="item.index"
           :key="item.index"
           :class="{'show':item.index == videoIndex, 'hide': item.index != videoIndex}"
           :src="item.url"
           :muted="muted"
           @canplay="canplay($event,item)"
           @ended="ended($event,item)" />
    <div class="gif-box">
      <img v-show="bkshow"
           src="../../../assets/msw/gif/1_00000.png">
      <img v-if="gifShow"
           @load="getImg"
           :src="gifUrl">
    </div>

  </div>
</template>
<script>
import StatusShow from "./statusShow";

// import gifv_0 from "../../../assets/msw/video/1.mp4";
export default {
  name: "VideoGIF",
  components: {
    StatusShow,
  },
  props: {
    nextIndex: {
      type: String,
      default: "",
    },
    loop: {
      type: Boolean,
      default: true,
    },
  },

  data() {
    return {
      muted: false,
      bkshow: true,
      processIndex: 0,
      gifList: [],
      gifUrl: "",
      gifShow: true,
      videoNum: 0, //视频数量
      videoIndex: "v_0", //当前Id
      overVideoList: [{}], //已播放的视频的id数组
    };
  },
  watch: {
    nextIndex: {
      handler(val, pre) {
        console.log(val, pre);
        this.videoIndex = val.split("_time")[0];
        let preIndex;
        if (pre) preIndex = pre.split("_time")[0];
        this.overVideoList.push(this.videoIndex);
        console.log("videoIndex=》" + this.videoIndex);
        // if (!this.videoIndex) return;
        if (pre) {
          this.$refs[`${preIndex}`][0].currentTime = 0;
          this.$refs[`${preIndex}`][0].pause();
        }
        if (this.videoIndex === "v_0") {
          this.muted = true;
        } else {
          this.muted = false;
        }
        this.play();
      },
      // immediate: true,
    },
  },
  created() {
    this.loadingGIF();
    this.getLocalVideo();
    this.videoNum = 0;
  },
  mounted() {},
  destroyed() {},
  methods: {
    getImg() {
      this.bkshow = false;
      this.$refs[`${this.videoIndex}`][0].play();
      console.log("图片加载完成");
    },
    loadingGIF() {
      this.gifList = [];
      for (let index = 0; index <= 25; index++) {
        const gif = require(`../../../assets/msw/gif/${index}.gif`);
        this.gifList.push(gif);
      }
    },
    getLocalVideo() {
      this.videoList = [];
      for (let index = 0; index <= 25; index++) {
        const item = {
          url: require(`../../../assets/msw/video/${index}.mp4`),
          index: "v_" + index,
        };
        this.videoList.push(item);
      }
    },

    ended(e, item) {
      console.log("播放完成" + item.index);
      const that = this;
      this.gifShow = false;
      this.gifUrl = null;
      this.bkshow = true;
      if (that.loop) {
        setTimeout(() => {
          that.play();
        }, 0);
        return;
      }
      if (that.nextIndex) {
        this.$emit("ended");
      }
    },
    pause() {
      this.bkshow = true;
      this.gifShow = false;
      this.$refs[`${this.videoIndex}`][0].pause();
      this.gifUrl = null;
    },
    // 视频播放
    play() {
      // this.pause();
      console.log("调用了视频播放");
      this.bkshow = true;
      this.gifShow = true;

      const index = parseInt(this.videoIndex.split("_")[1]);
      this.gifUrl =
        this.gifList[index] + "?time=" + Math.floor(Math.random() * 10000);
    },
    canplay(e, item) {
      const that = this;
      ++this.videoNum;
      if (that.videoIndex <= that.videoList.length) {
        e.target.pause();
      }
      if (that.videoNum == that.videoList.length) {
        that.$message.success("所有视频加载成功");
        // that.$refs[`${this.videoIndex}`][0].play();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.video-bk {
  position: absolute;
  width: 1920px;
  height: 1080px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  // background: url(../images/bg.png) no-repeat center;
  block-size: 1920px 1080px;
  overflow: hidden;
  .progress-show {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
  }
  video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1920px;
    height: 1080px;

    &.show {
      width: 0;
      height: 0;
      visibility: visible;
    }
    &.hide {
      width: 0;
      height: 0;
      visibility: hidden;
    }
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        z-index: ($i + 1);
      }
    }
  }
  .gif-box {
    position: absolute;
    left: 292px;
    top: 66px;
    right: 0;
    bottom: 0;
    width: 1920px;
    height: 1080px;
    z-index: 99;
    transform: scale(0.9);
    img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 1920px;
      height: 1080px;

      // width: 401px;
      // height: 971px;
      @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
          z-index: ($i + 1);
        }
      }
    }
  }
}
</style>

 

demo 调用 

<template>
  <div class="app-container">
    <VideoListPlay @ended="ended"
                   :nextIndex='process' />
  </div>
</template>

<script>
import VideoListPlay from "./videoListPlay.vue";
export default {
  name: "VideoTest",
  components: { VideoListPlay },
  data() {
    return {
      process: "1_1",
    };
  },
  created() {},
  methods: {
    ended() {
      ++this.playNum;
      const list = ["1_1", "2_1", "3_1", "4_1", "5_1"];
      const random = Math.floor(Math.random() * 5);
      this.process =
        list[random] + "_time=" + Math.floor(Math.random() * 1000000);
    },
  },
};
</script>
<style lang="scss" scoped>
img {
  width: 100%;
}
</style>