0202更新-vue swiper视频自动播放完毕后切换，图片停留数秒自动切换

最新推荐文章于 2024-10-29 11:28:53 发布

原创

最新推荐文章于 2024-10-29 11:28:53 发布 · 2.1k 阅读

标签

#vue.js

收录于

结合vue-awesome-swiper(v4.1.1)的多媒体自动轮播、自动播放组件。
视频自动播放，播完自动切换下一个。
图片停留2s切换（按需改setTimeOut就行）。
pagination点击后也是自动播放，自动切换。
----------------------12.15更新---------------------
自己用的时候一直静音没注意切换到前面的slide时候切换前的slide还在播放。。又改了一下。。
----------------------02.02更新---------------------
用的vue-awesome-swiper(v4.1.1)版本兼容不了IE（其实就是swiper5不兼容IE，），所以还是改了个能兼容IE的版本，如果需要兼容IE10，请使用AutoplayNextSwiper-compatible.vue

<template>
  <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 in mediaNews" :key="index" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
  export default {
   
   
    name: "AutoplayNextSwiper",
    data() {
   
   
      return {
   
   
        mediaLastIndex:0,
        swiperOption: {
   
   
          speed