微信小程序，连续播放多段视频。合成一个视频的样子，自定义视频进度条

1，首先要自定义播放进度的组件。因为每次播放自带的进度条，每个视频都是从0开始的。所以不显示自带的进度条。自定义一个进度条。可以参考小程序官网silder组件来写进度条。

所以前提是我们必须知道每个视频的长度。这样自定义进度条的时候总长度就是所有的视频长度之和。   slider | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

2,需要监听每个视频结束的函数，每次结束触发函数里面去判断是否播放了全部的视频。

3，拖拽进度条的时候要判断。拖到了第几个视频。然后播放相应的数组里面的第几个视频。

重写进度条和播放暂停所以原来的暂停播放和进度条就不显示了 。video标签添加

show-play-btn="{{false}}" show-center-play-btn="{{false}}"

WXML

{{startTime}}{{endTime}}

JS

Component({properties: {//视频播放列表videoList: {type: Array,value: [{url: 'http://1310895430.vod2.myqcloud.com/acb3025cvodbj1310895430/8899089c387702302247202150/MZdixh89MtgA.mp4',duration: '103',//视频对应的秒钟}, {url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',duration: '330'}]},// 视频总长度（1:10:10）},data: {// 视频下标index: 0,video: '',// 视频总长度（秒）duration: '',// 视频播放时间段（0:01）startTime: '00:00',// 视频总长度（10:10）endTime: '00::00',// 视频播放进度（百分比）percent: '0',totalTime:'0',// 是否在拖动isSlide: false,playStates: false,//true开始 false暂停},lifetimes: {ready: function () {this.setData({video: wx.createVideoContext('video', this),totalTime:this.properties.videoList.reduce((sum, e) => sum + Number(e.duration || 0), 0),endTime: this.timeToMinute(this.properties.videoList.reduce((sum, e) => sum + Number(e.duration || 0), 0)),defaultVideo:this.data.videoList[this.data.index].url})}},// 初始化实例onReady() {},methods: {// 暂停播放按钮videoOpreation() {console.log("播放暂停")this.data.playStates ? this.data.video.pause() : this.data.video.play();this.setData({playStates: !this.data.playStates})},// 监听播放进度bindtimeupdate(e) {let {currentTime, duration} = e.detail;let startTime=0;//计算视频的时间是上个视频的时间加上当前视频的播放时间for(var i=0;i//视频播放结束ended() {if (this.data.index == this.data.videoList.length - 1) {this.data.video.pause()wx.showToast({title: '已播放完成',icon: 'none',duration: 1000,mask: true,})this.setData({index: 0,playStates:false})} else {// console.log('播放下一个视频')this.videoPlay();}},videoPlay() {// console.log("我是下一个视频")var videolLength = this.data.videoList.length;this.setData({index: this.data.index+1,playStates:true})// console.log(this.data.index)this.data.video.autoplay ='true';//设置自动播放this.data.video.play()//播放视频},// 完成一次拖动后触发bindchange(e) {// console.log("bindchange完成一次拖动后"+e.detail.value)this.setSlide(e.detail.value)let {value} = e.detaillet {video, duration} = this.datalet seekpeed=value / 100 * this.data.totalTime;//根据视频的总长度计算拖动的长度对应的视频播放的时间// console.log("seekpeed"+seekpeed)let startTime=0;   
//判断是第几个视频，只要找到下标就结束循环var videolLength = this.data.videoList.length; for(var i=0;i// console.log("拖拽结束之后的视频开始时间"+startTime);//  console.log("拖拽结束之后当前视频下标"+this.data.index)let seek=parseInt(seekpeed-startTime);//跳转的位置// console.log("跳转的位置"+seek)this.data.video.play()//播放视频this.data.video.seek(seek);this.setData({startTime: this.timeToMinute(seekpeed),//拖拽结束后的开始时间显示playStates:true,isSlide: false})},// 拖动过程中触发bindchanging(e) {// console.log("bindchanging拖动过程中触发"+e.detail.value)this.setSlide(e.detail.value)},// 设置进度条setSlide(value) {// console.log("拖拽到的位置setSlide"+value)let startTime=value / 100 * this.data.totalTime;this.setData({isSlide: true,percentSlide: value,startTime: this.timeToMinute(startTime),//拖拽中的开始时间显示})},// https://blog.csdn.net/qq_31984879/article/details/84071245// 秒转换分钟00:00:00格式timeToMinute(times) {let t;if (times > -1) {let hour = Math.floor(times / 3600);let min = Math.floor(times / 60) % 60;let sec = times % 60;if (min < 10) {t = "0" + min + ':';}else{t = min + ":";}if (sec < 10) {t += "0";}t += sec.toFixed(2);}t = t.substring(0, t.length - 3);return t;},},})

 wxss

.content {position: relative;
}.content .video {width: 100%;border-radius: 12rpx;
}.content .slider {width: 70%;height: 50rpx;margin-left:58rpx;/* overflow: hidden;*/
}.content .slider .plan {width: 90%;height: 10rpx;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);background: rgba(255, 255, 255, 0.3);
}.content .slider .plan .sign {width: 30rpx;height: 30rpx;background-color: #FFFFFF;border-radius: 50%;position: absolute;bottom: -9rpx;
}.content .slider slider {/* margin: 0rpx 50rpx; *//* opacity: 0; */
}.play-pause{font-size:70rpx;color:#fff;/* padding: 20rpx; */
}
.process-container{display:flex;align-items: baseline;justify-content:flex-start;position:absolute;bottom: 20rpx;left: 30rpx;z-index:9999;width: 100%;
}
.time{display:inline-block;font-size:28rpx;color:#FFF;position: absolute;top:29rpx;
}
.time.startTime{left:75rpx;
}
.time.endTime{right:44rpx;
}
.slider-light .wx-slider-handle-wrapper {height: 40rpx;
}

下载这个组件可以去这个地址微信小程序多个视频合成一个播放。一个播放完自动在播放另一个。自定义视频进度组件-Javascript文档类资源-CSDN下载

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！