vue elementui封装视频图片轮播图
产品想了一个视频和图片混合轮播的方案，结合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"><buttontype="button"class="el-carousel__arro el-carousel__arrow--left"@click.stop="prevIndex"><i class="el-icon-arrow-left"></i></button><buttontype="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=""><videov-elseclass="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: '',//视频数组idcurrentVideoId:'',//当前videocurrentPlay: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.2url: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: {//当前idactiveIndex() {let activeIndex = this.$refs.carousel.activeIndex;//element ui内置方法获取点击轮播对idreturn 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 或者全局挂载都行，在需要对页面引入组件就好，目前该组件实现了一个页面多个轮播，和自定义播放暂停，切换如果是视频就停止，视频倒计时没有实现，欢迎大佬补充
vue elementui封装视频图片轮播图
产品想了一个视频和图片混合轮播的方案，结合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"><buttontype="button"class="el-carousel__arro el-carousel__arrow--left"@click.stop="prevIndex"><i class="el-icon-arrow-left"></i></button><buttontype="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=""><videov-elseclass="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: '',//视频数组idcurrentVideoId:'',//当前videocurrentPlay: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.2url: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: {//当前idactiveIndex() {let activeIndex = this.$refs.carousel.activeIndex;//element ui内置方法获取点击轮播对idreturn 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 或者全局挂载都行，在需要对页面引入组件就好，目前该组件实现了一个页面多个轮播，和自定义播放暂停，切换如果是视频就停止，视频倒计时没有实现，欢迎大佬补充
发布评论