Vue 视频与图片混合自动轮播_vue实现图片和视频混合播放

结合vue-awesome-swiper的多媒体自动轮播、自动播放组件。

1、安装vue-awesome-swiper

npm i vue-awesome-swiper@3 -S

2、引入vue-awesome-swiper

页面引入：

<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
};
</script>

全局引入：

main.js

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
//引入样式
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)

3、主要代码

<template>
  <div id="app">
    <div class="test">
      <div class="autoplay">
        <swiper :options="swiperOption"
          ref="videoSwiper"
          v-if="initOrNot">
          <swiper-slide v-for="( item , index ) in mediaNews"
            :key="index">
            <video v-if="item.type===1"
              :src="item.url"
              controls
              muted
              @ended="endVideo(index)"
              class="multimedia"></video>
            <img v-else
              :src="item.url"
              class="multimedia">
          </swiper-slide>
          <div class="swiper-pagination"
            v-for="(item,index) in mediaNews"
            :key="index"
            slot="pagination"></div>
        </swiper>
      </div>
    </div>
 
  </div>
</template>
 
<script>
//页面引入swiper
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'App',
  components: { swiper, swiperSlide },
  data() {
    return {
      mediaLastIndex: 0,
      swiperOption: {
        speed: 1000,
        loop: false,
        observer: true,
        observeParents: true,
        autoplayDisableOnInteraction: false,
        allowTouchMove: false,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        on: {
          slideChangeTransitionEnd: () => {
            this.slideChangeTransitionEndHandle()
          },
          slideChangeTransitionStart: () => {
            this.slideChangeTransitionStartHandle()
          },
          //控制第一个slide切换
          init: () => {
            this.initHandle()
          }
        }
      },
      initOrNot: false, //mediaNews数据改变的时候确保swiper会init一次
      mediaNews: [
        // 1为视频类2为图片类
        // { url: require('./assets/莫干山1.jpg'), type: 2 },
        // { url: require('./assets/v1.mp4'), type: 1 },
        // { url: require('./assets/v1.mp4'), type: 1 },
        // { url: require('./assets/莫干山1.jpg'), type: 2 }
      ]
    }
  },
  methods: {
    initHandle() {
      let that = this
      // console.log(this.mediaNews)
      setTimeout(function () {
        console.log(that.$refs.videoSwiper)
        let swiper = that.$refs.videoSwiper.swiper
        if (that.mediaNews[0]?.type === 2) {
          that.mediaNewsImgHandle(swiper)
        } else {
          document.getElementsByClassName('multimedia')[0]?.play()
        }
      }, 200)
    },
    mediaNewsImgHandle(swiper) {
      let that = this
      //刚切换到的activeIndex
      let changePointActiveIndex = swiper.activeIndex
      if (swiper.activeIndex < this.mediaNews.length - 1) {
        setTimeout(function () {
          //要确认changePointActiveIndex是不是还是目前的activeIndex，是的话计时后执行，不是的话不执行
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideNext()
          }
        }, 10000)
      } else {
        setTimeout(function () {
          if (changePointActiveIndex === swiper.activeIndex) {
            swiper.slideTo(0, 0)
          }
        }, 10000)
      }
    },
    slideChangeTransitionStartHandle() {
      let swiper = this.$refs.videoSwiper.swiper
      if (this.mediaNews[this.mediaLastIndex].type === 1) {
        document.getElementsByClassName('multimedia')[this.mediaLastIndex].currentTime = 0
      } else {
      }
    },
    slideChangeTransitionEndHandle() {
      // console.log('end..')
      let that = this
      let swiper = that.$refs.videoSwiper.swiper
      if (this.mediaNews[this.mediaLastIndex].type === 1) {
        document.getElementsByClassName('multimedia')[this.mediaLastIndex].pause()
      }
      if (this.mediaNews[swiper.activeIndex].type === 2) {
        this.mediaNewsImgHandle(swiper)
      } else {
        document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
      }
 
      this.mediaLastIndex = swiper.activeIndex
    },
    endVideo(index) {
      let swiper = this.$refs.videoSwiper.swiper
      if (index === swiper.activeIndex) {
        if (swiper.activeIndex < this.mediaNews.length - 1) {
          swiper.slideNext()
          if (this.mediaNews[swiper.activeIndex].type === 1) {
            document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
          } else {
            this.mediaNewsImgHandle(swiper)
          }
        } else {
          swiper.slideTo(0, 0)
          if (this.mediaNews[swiper.activeIndex].type === 1) {
            document.getElementsByClassName('multimedia')[swiper.activeIndex].play()
          } else {
            this.mediaNewsImgHandle(swiper)
          }
        }
      }
    }
  },
  watch: {
    mediaNews: {
      handler(newName, oldName) {
        this.initOrNot = false
        this.$nextTick(() => {
          this.initOrNot = true
        })
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
 
<style>
</style>

4、注意：在vue-awesome-swiper@4 版本中 需要将this.$refs.videoSwiper.swiper 换成this.$refs.videoSwiper.$swiper