vue2无需插件,自动视频播放,自动轮播实例解决方案,开箱即用

今天遇到一个需求,默认需要自动播放,播放完后自动播放下一条,并且支持自动循环,能够保证在第二次轮播时依旧能够自动播放,帮助更多小白入坑,直接上代码:

      <el-carousel
          ref="carousel"
          height="225px"
          indicator-position="none"
          :autoplay="false"
          :autoplay-hover-pause="true"
          @change="carouselChange"
        >
          <div v-if="vidData && vidData.length > 0">
            <el-carousel-item v-for="(item, index) in vidData" :key="item">
              <video
                ref="videos"
                class="tsgz-video"
                controls="controls"
                :src="item"
                autoplay
                type="video/mp4"
                muted
                @ended="playNextVideo(index)"
              >
                您的浏览器不支持 video 标签。
              </video>
            </el-carousel-item>
          </div>
          <el-empty
            description="暂无视频"
            v-else
            style="height: 225px"
            :image-size="40"
            image=""
          ></el-empty>
        </el-carousel>

el-carousel,利用element-ui中的走马灯实现默认自动轮播,关闭自动轮播,写入change事件,能够保证手动切换后依旧可以自动播放

  carouselChange(index) {
      const videos = this.$refs.videos;
      videos.forEach((video) => {
        video.currentTime = 0; // 将视频回到起始时间
        video.pause(); // 暂停视频播放
      });
      videos[index].play();
    },

获取到 实例上的videos,首先暂停所有视频,重置时间为0,然后播放选择的视频

利用video标签,给上src路径,可以设置type来判断什么格式的视频,建议设置,不同浏览器支持不一样,

autoplay:自动播放  不同浏览器不支持,建议同时打开muted 

myted:自动静音

@ended: 进度条结束时触发的事件,利用这个事件我们可以来做一些事情

   playNextVideo(index) {
      const videos = this.$refs.videos;
      let nextIndex = index;
      if (index < this.vidData.length - 1) {
        nextIndex = nextIndex + 1;
      } else {
        nextIndex = 0;
      }
      const carousel = this.$refs.carousel;
      carousel.setActiveItem(nextIndex);
      const nextVideo = videos[nextIndex];
      videos.forEach((video) => {
        video.pause();
        video.currentTime = 0;
      });
      setTimeout(() => {
        nextVideo.play();
      }, 1000);
    },

settimeout设置主要是防止网络较差情况,导致的播放时并没有加载出来视频

结束!