【插件】vue vue-awesome-swiper 视频与图片混合自动轮播 视频播放完后自动切换下一个

vue-awesome-swiper版本3.1.3

组件代码如下：

<template>
  <div class="awesomeSwiper">
    <swiper
        :options="swiperOption"
        ref="videoSwiper"
        v-if="initOrNot"
        class="swiperBox"
    >
      <swiper-slide v-for="(item, index) in mediaNews" :key="index">
        <video
            v-if="item.type === 0"
            :src="item.link"
            controls
            muted
            autoplay
            fluid="false"
            preload="auto"
            class="multimedia video-js"
        ></video>
        <img v-else :src="item.link" class="multimedia"/>
      </swiper-slide>
    </swiper>
    <div class="swiper-button-prev" @click="prev"></div>
    <div class="swiper-button-next" @click="next"></div>
  </div>
</template>
<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  name: 'awesomeSwiper',
  components: {swiper, swiperSlide},
  props: ['mediaNews'],
  data() {
    return {
      mediaLastIndex: 0, // 记录上一次页面的activeIndex
      swiperOption: {
        speed: 1000,
        loop: false,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        allowTouchMove: false,
        runCallbacksOnInit: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        on: {
          slideChangeTransitionEnd: () => {
            this.slideChangeTransitionEndHandle()
          },
          slideChangeTransitionStart: () => {
            this.slideChangeTransitionStartHandle()
          },
          //控制第一个slide切换
          init: () => {
            this.initHandle()
          },
        },
      },
      initOrNot: false, //mediaNews数据改变的时候确保swiper会init一次
    }
  },
  methods: {
    /**
     * @description 控制第一个slide切换
     * @author 饺子
     */
    initHandle() {
      this.$nextTick(() => {
        let swiper = this.$refs.videoSwiper.swiper
        // type: 【0：视频 1：图片】
        if (this.mediaNews[swiper.realIndex]?.type === 1) {
          this.mediaNewsImgHandle(swiper)
        } else {
          document.getElementsByClassName('multimedia')[swiper.activeIndex]?.play()
          // FIXME clone的视频单独监听结束播放
          document.getElementsByClassName('multimedia')[swiper.activeIndex].onended = ()=>{
            this.endVideo()
          }
        }
      })
    },
    /**
     * @description 图片切换
     * @author 饺子
     */
    mediaNewsImgHandle(swiper) {
      //刚切换到的activeIndex
      let changePointActiveIndex = swiper.activeIndex
      if (swiper.activeIndex < this.mediaNews.length - 1) {
        setTimeout(() => {
          //要确认changePointActiveIndex是不是还是目前的activeIndex，是的话计时后执行，不是的话不执行
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideNext()
          }
        }, 6000)
      } else {
        setTimeout(() => {
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideTo(0, 0)
          }
        }, 6000)
      }
    },
    /**
     * @description 切换页面开始
     * @author 饺子
     */
    slideChangeTransitionStartHandle() {
      let swiper = this.$refs.videoSwiper.swiper
      // type: 【0：视频 1：图片】
      if (this.mediaNews[swiper.realIndex].type === 0) {
        // FIXME 进入当前页面为视频则设置视频播放视频时间为0
        document.getElementsByClassName('multimedia')[swiper.activeIndex].currentTime = 0
      }
    },
    /**
     * @description 切换页面完成
     * @author 饺子
     */
    slideChangeTransitionEndHandle() {
      let swiper = this.$refs.videoSwiper.swiper
      // type: 【0：视频 1：图片】 上一个页面是视频则暂停播放上一个页面的视频
      if (document.getElementsByClassName('multimedia')[this.mediaLastIndex].tagName === 'VIDEO') {
        document.getElementsByClassName('multimedia')[this.mediaLastIndex].pause()
      }
      // type: 【0：视频 1：图片】
      if (this.mediaNews[swiper.realIndex].type === 1) {
        this.mediaNewsImgHandle(swiper)
      } else {
        // FIXME 视频则开始播放
        document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
        // FIXME clone的视频单独监听结束播放
        document.getElementsByClassName('multimedia')[swiper.activeIndex].onended = ()=>{
          this.endVideo()
        }
      }
      // FIXME 记录当前页面的activeIndex
      this.mediaLastIndex = swiper.activeIndex
    },
    /**
     * @description 视频播放完触发事件-播放结束切换下一页面
     * @author 饺子
     */
    endVideo() {
      // FIXME 传入的list长度小于等于1则不切换下一页面
      if(this.mediaNews.length <= 1) return
      let swiper = this.$refs.videoSwiper.swiper
      swiper.slideNext()
    },
    /**
     * @description 切换上一个页面
     * @author 饺子
     */
    prev() {
      // FIXME 传入的list长度小于等于1则不切换上一页面
      if(this.mediaNews.length <= 1) return
      this.$refs.videoSwiper.swiper.slidePrev()
    },
    /**
     * @description 切换下一个页面
     * @author 饺子
     */
    next() {
      // FIXME 传入的list长度小于等于1则不切换下一页面
      if(this.mediaNews.length <= 1) return
      this.$refs.videoSwiper.swiper.slideNext()
    },
  },
  watch: {
    mediaNews: {
      handler(newVal, oldVal) {
        this.initOrNot = false
        this.$nextTick(() => {
          this.initOrNot = true
          // FIXME 传入的list长度大于2自动轮播
          if (newVal && newVal.length >= 2) this.swiperOption.loop = true
        })
      },
      immediate: true,
      deep: true,
    },
  },
}
</script>
<style scoped lang='less'>
.awesomeSwiper {
  width: 569px;
  height: 248px;
  position: relative;
}

.swiperBox {
  width: 510px;
  height: 248px;
}

.multimedia, .multiImg {
  width: 510px;
  height: 248px;
}

.video-js {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 7, 0.6);
  object-fit: fill;
}

/*先去掉默认样式*/
.swiper-button-prev:after {
  display: none;
}

.swiper-button-next:after {
  display: none;
}

/*再自定义样式*/
.swiper-button-prev {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  background: url('../assets/left.png') center/cover no-repeat;
  bottom: 15px;
}

.swiper-button-next {
  position: absolute;
  right: 0;
  width: 28px;
  height: 28px;
  background: url('../assets/right.png') center/cover no-repeat;
  bottom: 15px;
}
</style>

使用组件

<template>
	<awesome-swiper :mediaNews="mediaList"></awesome-swiper>
</template>
<script>
// 引入组件
import awesomeSwiper from '../components/awesomeSwiper.vue'
export default {
  name: 'home',
  // 注册组件
  components: {
    awesomeSwiper,
  },
  data() {
    return {
    	mediaList: [
    		{
    			type: 0,   // 【0: 视频，1：图片】
    			link： '', // 连接地址
			}
    	]
    }
  }
}
</script>