产品想了一个视频和图片混合轮播的方案，结合elementUI的走马灯封成了一个组件，小白一枚，欢迎大佬指导，

下面贴出代码，供大家参考，因为涉及了一下自定义控件，可能不是很符合大家的要求

<template>
  <div class="block">
    <el-carousel
      :height="bannerHeight + 'px'"
      :width="bannerWidth + 'px'"
      :autoplay="false"
      trigger="click"
      ref="carousel"
      @click.native="activeIndex"
    >
      <el-carousel-item v-for="(item,i) in centerList" :key="i" name="i">
        <button
          type="button"
          class="el-carousel__arro el-carousel__arrow--left"
          @click.stop="prevIndex"
        >
          <i class="el-icon-arrow-left"></i>
        </button>
        <button
          type="button"
          class="el-carousel__arro el-carousel__arrow--right"
          @click.stop="nextIndex"
        >
          <i class="el-icon-arrow-right"></i>
        </button>
        <img class="shufflingImg"  v-if="item.type==1" :src="fixUrl(item.url)" alt="">
        <video
          v-else
          class="shufflingVideo"
          :id="'v_'+Id+i"
          :src="item.url"
          ref="audio"
        ></video>
        <div class="lengthTime" v-if="item.type==2">
            <span>{{item.time}}</span>
        </div>
        <div class="imgControls" v-if="item.type==2">
             <span v-if="currentPlay" @click.stop="currentState(0,i)"><img src="./controls_img/bofang.png" alt="" ></span>
             <span v-if="currentPause" @click.stop="currentState(1,i)"><img src="./controls_img/zanting.png" alt=""></span>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
export default {
  props: ['centerlist', 'width', 'height', 'id', 'autoplay','videoplay'],
  data() {
    return {
      centerList: [],
      autoPlay:'',//自动播放
      videoPlay:'',//是否可播放
      Id: '',//视频数组id
      currentVideoId:'',//当前video
      currentPlay:true,//当前播放
      currentPause:'',//当前暂停
      bannerHeight :'',//高度
      bannerWidth:'',//宽度
    };
  },
  mounted() {
    this.centerList = this.centerlist;
    this.bannerWidth = this.width;
    this.bannerHeight = this.height;
    this.Id = this.id;
    this.videoPlay = this.videoplay;
    this.centerList = [
      {
        type: this.centerList.sampleCoverType, //type1.2
        url:this.centerList.sampleCoverType == 1? this.centerList.sampleCover.split(',')[0]: this.centerList.sampleCover, //轮播数
        time:Math.round(this.centerList.sampleCoverVideoDuration)
      },
      {
        type:this.centerList.sampleWork1Type,
        url:this.centerList.sampleWork1Type==null?'':(this.centerList.sampleWork1Type==1?(this.centerList.sampleWork1 || '').split(',')[0]: this.centerList.sampleWork1),
        time:Math.round(this.centerlist.sampleWork1VideoDuration)
      },
      {
        type: this.centerList.sampleWork2Type,
        url:this.centerList.sampleWork2Type==null?'':(this.centerList.sampleWork2Type==1?(this.centerList.sampleWork2 || '').split(',')[0]: this.centerList.sampleWork2),
        time:Math.round(this.centerlist.sampleWork2VideoDuration)
      },
      {
        type: this.centerList.sampleWork3Type,
        url:this.centerList.sampleWork3Type==null?'':(this.centerList.sampleWork3Type==1?(this.centerList.sampleWork3 || '').split(',')[0]: this.centerList.sampleWork3),
        time:Math.round(this.centerlist.sampleWork3VideoDuration)
      },
      {
        type: this.centerList.sampleWork4Type,
        url:this.centerList.sampleWork4Type==null?'':(this.centerList.sampleWork4Type==1?(this.centerList.sampleWork4 || '').split(',')[0]: this.centerList.sampleWork4),
        time:Math.round(this.centerlist.sampleWork4VideoDuration)
      },
      {
        type: this.centerList.sampleWork5Type,
        url:this.centerList.sampleWork5Type==null?'':(this.centerList.sampleWork5Type==1?(this.centerList.sampleWork5 || '').split(',')[0]: this.centerList.sampleWork5),
        time:Math.round(this.centerList.sampleWork5VideoDuration)
      },
    ];
//后台的数据不是很好用就进行了重新组合，type判断视频还是图片，url是地址，time是时长
    this.centerList=this.centerList.filter(item=>item.type!=null)
    for (var i = 0; i <this.centerList.length; i++) {
           this.centerList[i]["time"]=this.lengthTime(this.centerList[i].time)
      }
  },
  methods: {
    //当前id
    activeIndex() {
      let activeIndex = this.$refs.carousel.activeIndex;//element ui内置方法获取点击轮播对id
      return activeIndex;
    },
    //上
    prevIndex(){
      this.activeIndex();
      this.currentPlay=true;
      this.currentPause=false;
      this.currentVideoId = document.getElementById('v_'+this.Id+this.activeIndex());
      this.currentVideoId==null?'':this.currentVideoId.pause();
      this.$refs.carousel.setActiveItem(this.activeIndex() -1);
    },
    //下
    nextIndex(){
      this.activeIndex();
      this.currentPlay=true;
      this.currentPause=false;
      this.currentVideoId = document.getElementById('v_'+this.Id+this.activeIndex());
      this.currentVideoId==null?'':this.currentVideoId.pause();
      //this.currentVideoId.pause();
      this.$refs.carousel.setActiveItem(this.activeIndex()+ 1);
    },
    currentState(numb,i) {
        if(numb==0){
            this.currentVideoId = document.getElementById('v_'+this.Id+this.activeIndex());
            if(this.videoPlay==false){
                this.currentPlay=true;
                this.currentPause=false;
            }else{
                this.currentPlay=false;
                this.currentPause=true;
                this.currentVideoId.play(); 
            }
        }else{
            this.currentPlay=true;
            this.currentPause=false;
            this.currentVideoId = document.getElementById('v_'+this.Id+this.activeIndex());
            let allVideo=document.getElementsByTagName('video');
            // console.log('所有video---->',allVideo)
            this.currentVideoId!==null?this.currentVideoId.pause():'';
        }
 
    },
//后台传过来的是秒，所以需要对时间进行处理，播放时间倒计时没做出来，欢迎大佬补充讨论
    lengthTime(s){
       var day = Math.floor(s / (24 * 3600)); 
       var hour = Math.floor((s - day * 24 * 3600) / 3600);
       var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60);
       var second = s - day * 24 * 3600 - hour * 3600 - minute * 60;
       if (second < 10) {
          if (minute < 10) {
            return "0" + minute + ":" + second + "0";
          } else {
            return minute + ":" + second + "0";
          }
        } else {
          return minute + ":" + second;
       }
    }
  }
};
</script>
<style lang="less" scope>
.shufflingImg {
  width: 100%;
  height: 100%;
}
.shufflingVideo{
  width: 100%;
  height: 100%;
}
.el-carousel__item {
  z-index: -4;
}
.el-carousel__indicators {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.el-carousel__indicator {
  display: inline-block;
  padding: 12px 4px;
}
.el-carousel__indicators > .is-active > .el-carousel__button {
  width: 10px;
  height: 10px;
}
.el-carousel__button {
  width: 8px;
  height: 8px;
  background: rgba(254, 254, 254, 1);
  border-radius: 50%;
}
.el-carousel__arrow--left {
  left: -10px;
}
.el-carousel__arrow--right {
  right: -10px;
}
.el-carousel__arrow {
  display: none;//因为需要点击下一个停止播放，所以重新写了elemennt 的左右切换按钮

}
.el-carousel__arrow:hover {
  color: #929292;
  background-color: #ffffff;
}
.block:hover .el-carousel__arro{
    display: block;
}
.el-carousel__arro {
  display: none;
  border:1px solid rgba(220,220,220,1)!important;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  z-index: 996;
  transform: translateY(-50%);
  text-align: center;
  color: #bfbfbf;
  background-color: #ffffff;
  font-size: 15px;
  height: 30px;
  width: 30px;
}
.el-carousel__arro:hover {
  color: #929292;
  background-color: #ffffff;
}
.imgControls{
 z-index:256;
 width:30px;
 height:30px;
 position: absolute;
 top: 10px;
 right: 10px;   
}
.lengthTime{
  z-index:256;
  width:36px;
  height:15px;
  line-height: 15px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  right: 10px; 
  background:rgba(33,33,33,1);
  opacity:0.6;
  border-radius:8px;
  span{
    font-size:12px;
    color:rgba(255,255,255,1);
    text-align: center;
  }  
}
</style>

组件引入，通过import 或者全局挂载都行，在需要对页面引入组件就好，目前该组件实现了一个页面多个轮播，和自定义播放暂停，切换如果是视频就停止，视频倒计时没有实现，欢迎大佬补充