vue實現視頻循環並自動播放下一個

　　需求：循環播放視頻，當前視頻播放完自動播放下一條，可左右點擊按鈕播放。

• 下載videojs-contrib-hls

npm install --save-dev videojs-contrib-hls

• 新建 autovideo.vue

<template>
  <div id="home">
    <v-carousel
      :slideData="slideData"
      :height="500"
      :begin="0"
      :interval="3000"
      :dot="true"
      :arrow="true"
    ></v-carousel>
  </div>
</template>
<script>
import carousel from "./carousel";

export default {
  name: "home",
  components: {
    "v-carousel": carousel,
  },
  data() {
    return {
      slideData: [
        {
          title: "這是一個Vue輪播圖組件的第一張視頻",
          url: "#",
          videos: [
            {
              video:
                "https://vd4.bdstatic.com/mda-mcpms09pz58mqdxw/sc/cae_h264/1616572201/mda-mcpms09pz58mqdxw.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1647252150-0-0-0683d342d1137a7f691f95b9c02b605a&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1949937790&vid=5182956752389980978&abtest=100815_2-17451_1&klogid=1949937790",
            }],
        },
        {
          title: "這是一個Vue輪播圖組件的第二張視頻",
          url: "#",
          videos: [
            {
              video:
                "https://vd4.bdstatic.com/mda-nc1e4za15kncuve9/sc/cae_h264_delogo/1646218556546024491/mda-nc1e4za15kncuve9.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1647253474-0-0-7e0da997aa917942dce8a44c2df2fc48&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=3274410256&vid=11156914148044316292&abtest=100815_2-17451_1&klogid=3274410256",
            }],
        },
        {
          title: "這是一個Vue輪播圖組件的第三張視頻",
          url: "#",
          videos: [
            {
              video:
                "https://vd4.bdstatic.com/mda-ncbh11cgw6bj8qai/sc/cae_h264_delogo/1647087312809927190/mda-ncbh11cgw6bj8qai.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1647253514-0-0-3d99bca4db9c234dddc5cc9d7713dd2e&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=3314734094&vid=9554723148054233875&abtest=100815_2-17451_1&klogid=3314734094",
            }],
        },
        {
          title: "這是一個Vue輪播圖組件的第四張視頻",
          url: "#",
          videos: [
            {
              video:
                "https://vd2.bdstatic.com/mda-ncb8qt3bzhzaekww/720p_frame30/h264_cae_delogo/1647065383822388160/mda-ncb8qt3bzhzaekww.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1647253531-0-0-f9241cc0cada8a9c3b06b306ff76ae11&bcevod_channel=searchbox_feed&cd=0&pd=1&pt=3&logid=3331469757&vid=9544865226706432710&abtest=100815_2-17451_1&klogid=3331469757",
            }],
        },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped>
</style>

• 新建 carousel.vue（需要自動循環播放的自行解注釋）

<template>
  <div id="carousel">
    <div
      class="carousel"
      ref="carousel"
      v-bind:style="{ height: height + 'px' }"
    >
      <transition-group tag="ul" class="slide clearfix" :name="transitionName">
        <li
          v-for="(item, index) in slideData"
          :key="index"
          v-show="index == beginValue"
          v-bind:style="{ height: height + 'px' }"
          style="display: flex"
        >
          <!-- 播放視頻 -->
          <div v-for="(v, e) in item.videos" :key="e" class="videos">
            <video
              ref="videoPlay"
              muted=""
              :src="v.video"
              controls="controls"
              :autoplay="autoPlay"
              loop="loop"
              style="width: 100%; height: 100%"
              @timeupdate="timeupdate"
            ></video>
          </div>
          <div class="up" @click="up"> &lt; </div>
          <div class="next" @click="next"> &gt;</div>
        </li>
      </transition-group>
    </div>
  </div>
</template>

<script>
import "videojs-contrib-hls";
export default {
  name: "carousel",
  data() {
    return {
      setInterval: "",
      beginValue: 0,
      transitionName: "slide",
      mytime_02: true,
    };
  },
  beforeDestroy() {
    // 組件銷毀前,清除監聽器
    clearInterval(this.setInterval);
  },
  methods: {
    timeupdate(e) {
      if (!this.mytime_02) {
        return;
      } //首次進入能執行
      this.mytime_02 = false;
      setTimeout(() => {
        if(parseInt(e.target.currentTime)== Math.floor(e.target.duration)){
            this.next()
        }
        this.mytime_02 = true; //上次執行成功，下一次才可執行。
      }, 1000);
    },
    //改變前后
    change(key) {
      if (key > this.slideData.length - 1) {
        key = 0;
      }
      if (key < 0) {
        key = this.slideData.length - 1;
      }
      this.beginValue = key;
    },
    autoPlay() {
      this.transitionName = "slide";
      this.beginValue++;
      if (this.beginValue >= this.slideData.length) {
        this.beginValue = 0;
        return;
      }
    },
    play() {
      //   this.setInterval = setInterval(this.autoPlay, this.interval);
      this.autoPlay;
    },
    mouseOver() {
      //鼠標進入
      //console.log('over')
    //   clearInterval(this.setInterval);
    },
    mouseOut() {
      //鼠標離開
      //console.log('out')
    //   this.play();
    },
    up() {
      //上一頁
      --this.beginValue;
      this.transitionName = "slideBack";
      this.change(this.beginValue);
    },
    next() {
      //下一頁
      ++this.beginValue;
      this.transitionName = "slide";
      this.change(this.beginValue);
    },
  },
  mounted() {
    // var box = this.$refs.carousel; //監聽對象
    // box.addEventListener("mouseover", () => {
    //   this.mouseOver();
    // });
    // box.addEventListener("mouseout", () => {
    //   this.mouseOut();
    // });
    this.beginValue = this.begin;
    this.play();
  },
  props: {
    height: {
      type: Number,
      default: 600,
    },
    dot: {
      type: Boolean,
      default: true,
    },
    arrow: {
      type: Boolean,
      default: true,
    },
    interval: {
      type: Number,
      default: 5000,
    },
    begin: {
      type: Number,
      default: 0,
    },
    slideData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>

<style scoped>
.slide {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  /* height: 1.4rem; */

  height: 500px;
}
.slide li {
  list-style: none;
  position: absolute;
  width: 100%;
  height: 500px;
  /* height: 1.4rem; */
}
.slide li img {
  /* width: 100%; */
  /* height: 1.4rem; */
  height: 500px;
  cursor: pointer;
}
.slide li .title {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 20px;
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: larger;
  text-align: center;
}
.videos {
  width: 100%;
  height: 100%;
  /* margin-top: 0.2rem; */
}
.videos:nth-child(1) {
  margin-right: 0.2rem;
}

.slideDot {
  position: absolute;
  z-index: 999;
  bottom: 0.2rem;
  right: 1.85rem;
}
.slideDot span {
  display: inline-block;
  width: 0.07rem;
  height: 0.07rem;
  background: rgba(255, 255, 255, 0.65);
  margin-left: 0.05rem;
}
.slideDot span.active {
  background: rgba(255, 255, 255, 1);
}
.up,
.next {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: 0;
  cursor: pointer;
  font-size: 50px;
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.up {
  left: 0.25rem;
}
.next {
  left: auto;
  right: 0.25rem;
}
/* .up:hover {
  background-color: rgba(0, 0, 0, 0.3);
} */
/* .next:hover {
  background-color: rgba(0, 0, 0, 0.3);
} */

/*進入過渡生效時的狀態*/
.slide-enter-active {
  transform: translateX(0);
  transition: all 1s ease;
}

/*進入開始狀態*/
.slide-enter {
  transform: translateX(-100%);
}

/*離開過渡生效時的狀態*/
.slide-leave-active {
  transform: translateX(100%);
  transition: all 1s ease;
}

/*離開過渡的開始狀態*/
.slide-leave {
  transform: translateX(0);
}

/*進入過渡生效時的狀態*/
.slideBack-enter-active {
  transform: translateX(0);
  transition: all 1s ease;
}

/*進入開始狀態*/
.slideBack-enter {
  transform: translateX(100%);
}

/*離開過渡生效時的狀態*/
.slideBack-leave-active {
  transform: translateX(-100%);
  transition: all 1s ease;
}

/*離開過渡的開始狀態*/
.slideBack-leave {
  transform: translateX(0);
}
</style>