当前位置:网站首页>Wechat applet, continuously playing multiple videos. Synthesize the appearance of a video and customize the video progress bar
Wechat applet, continuously playing multiple videos. Synthesize the appearance of a video and customize the video progress bar
2022-07-01 21:36:00 【Summer thought】
1, First, customize the components of playback progress . Because the progress bar comes with each playback , Every video is from 0 At the beginning . So don't show your own progress bar . Customize a progress bar . You can refer to the official website of the applet silder Component to write progress bar .
So the premise is that we must know the length of each video . In this way, when customizing the progress bar, the total length is the sum of all video lengths . slider | Wechat open documents Wechat Developer Platform documentation https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
2, The function that needs to monitor the end of each video , Each time the end trigger function is used to determine whether all videos have been played .
3, Judge when dragging the progress bar . Drag to the first few videos . Then play the videos in the corresponding array .
Rewrite the progress bar and playback pause, so the original pause playback and progress bar will not be displayed .video add
show-play-btn="{ {false}}" show-center-play-btn="{ {false}}"
WXML
<view class="content">
<video class="video" id="video"
src="{
{videoList[index].url||defaultVideo}}"
object-fit="cover"
id="video"
autoplay="{
{false}}"
controls="{
{false}}"
show-play-btn="{
{false}}"
show-center-play-btn="{
{false}}"
enable-progress-gesture="{
{true}}"
bindtimeupdate="bindtimeupdate"
bindseekcomplete="bindseekcomplete"
binderror="error"
bindended="ended"
>
</video>
<view class="process-container">
<van-icon name="{
{playStates ? 'pause':'play'}}" class="play-pause" bindtap='videoOpreation'/>
<view class="slider">
<slider block-size="{
{12}}" class="slider-light" activeColor="#ccc"
value="{
{isSlide ? percentSlide : percent}}" bindchange="bindchange"
bindchanging="bindchanging"/>
<text class="time startTime">{
{startTime}}</text>
<text class="time endTime">{
{endTime}}</text>
</view>
</view>
</view>
JS
Component({ properties: { // Video playlists videoList: { type: Array, value: [{ url: 'http://1310895430.vod2.myqcloud.com/acb3025cvodbj1310895430/8899089c387702302247202150/MZdixh89MtgA.mp4', duration: '103',// The second corresponding to the video }, { url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', duration: '330' }] }, // The total length of the video (1:10:10) }, data: { // Video subscript index: 0, video: '', // The total length of the video ( second ) duration: '', // Video playback period (0:01) startTime: '00:00', // The total length of the video (10:10) endTime: '00::00', // Video playback progress ( percentage ) percent: '0', totalTime:'0', // Whether you are dragging isSlide: false, playStates: false,//true Start false Pause }, 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 }) } }, // Initialize instance onReady() { }, methods: { // Pause play button videoOpreation() { console.log(" Play pause ") this.data.playStates ? this.data.video.pause() : this.data.video.play(); this.setData({ playStates: !this.data.playStates }) }, // Monitor playback progress bindtimeupdate(e) { let {currentTime, duration} = e.detail; let startTime=0;// The time of calculating the video is the time of the previous video plus the playback time of the current video for(var i=0;i<this.data.index;i++){ startTime+=parseInt(this.data.videoList[i].duration); } // console.log(" The progress bar time of the current video currentTime"+currentTime) // console.log('startTime:'+startTime) let nowTime=currentTime+startTime; this.setData({ startTime: this.timeToMinute(nowTime), percent: ((nowTime) / this.data.totalTime * 100).toFixed(2), }) // console.log(" Starting time "+this.data.startTime) // console.log(" The current video "+this.data.index) this.triggerEvent('refreshVideo', { nowTime: nowTime }, {}); }, // seek Trigger on completion bindseekcomplete() { // console.log("seek Trigger on completion ") this.setData({ isSlide: false }) }, // Video playback error error(e){ // this.data.video.play() console.log(e) }, // End of video playback ended() { if (this.data.index == this.data.videoList.length - 1) { this.data.video.pause() wx.showToast({ title: ' Finished playing ', icon: 'none', duration: 1000, mask: true, }) this.setData({ index: 0, playStates:false }) } else { // console.log(' Play the next video ') this.videoPlay(); } }, videoPlay() { // console.log(" I'm the next video ") 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';// Set up autoplay this.data.video.play()// Play the video }, // Trigger after completing a drag bindchange(e) { // console.log("bindchange After a drag "+e.detail.value) this.setSlide(e.detail.value) let {value} = e.detail let {video, duration} = this.data let seekpeed=value / 100 * this.data.totalTime;// Calculate the video playback time corresponding to the dragged length according to the total length of the video // console.log("seekpeed"+seekpeed) let startTime=0; // Which video is it , Just find the subscript and end the loop var videolLength = this.data.videoList.length; for(var i=0;i<this.data.videoList.length;i++){ if(seekpeed<this.data.videoList[i].duration){// Small progress this.setData({ index: i, }) break; }else{ startTime+=parseInt(this.data.videoList[i].duration);// Great progress this.setData({ index: i+1, }) break; } } // console.log(" The start time of the video after dragging "+startTime); // console.log(" After dragging, the current video subscript "+this.data.index) let seek=parseInt(seekpeed-startTime);// Jump position // console.log(" Jump position "+seek) this.data.video.play()// Play the video this.data.video.seek(seek); this.setData({ startTime: this.timeToMinute(seekpeed),// The start time after dragging is displayed playStates:true, isSlide: false }) }, // Trigger during dragging bindchanging(e) { // console.log("bindchanging Trigger during dragging "+e.detail.value) this.setSlide(e.detail.value) }, // Set progress bar setSlide(value) { // console.log(" Drag to the location setSlide"+value) let startTime=value / 100 * this.data.totalTime; this.setData({ isSlide: true, percentSlide: value, startTime: this.timeToMinute(startTime),// The start time in dragging is displayed }) }, // https://blog.csdn.net/qq_31984879/article/details/84071245 // Seconds convert minutes 00:00:00 Format 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; }
To download this component, you can go to this address Wechat applet combines multiple videos to play one . One player will automatically play the other after playing . Customize the video progress component -Javascript Document resources -CSDN download
边栏推荐
猜你喜欢
深度学习 常见的损失函数
EURA eurui E1000 series inverter uses PID to realize the relevant parameter setting and wiring of constant pressure water supply function
Customize the insertion of page labels and realize the initial search of similar address books
Importance of EDA tools to chip industry knowledge popularization
杰理之、产线装配环节【篇】
tensorflow 张量做卷积,输入量与卷积核维度的理解
2022安全员-B证考试练习题模拟考试平台操作
新版Free手机、PC、平板、笔记本四端网站缩略展示图在线一键生成网站源码
Practical project notes (I) -- creation of virtual machine
How to connect the two nodes of the flow chart
随机推荐
【STM32】STM32CubeMX教程二–基本使用(新建工程点亮LED灯)
【级联分类器训练参数】Training Haar Cascades
Uniapp uses Tencent map to select points without window monitoring to return users' location information. How to deal with it
PMP与NPDP之间的区别是什么?
都能看懂的LIS(最长上升子序列)问题[通俗易懂]
手动实现function isInstanceOf(child,Parent)
面试题:MySQL的union all和union有什么区别、MySQL有哪几种join方式(阿里面试题)[通俗易懂]
喜马拉雅自研网关架构演进过程
三菱PLC FX3U脉冲轴点动功能块(MC_Jog)
2022安全员-A证考题及在线模拟考试
基于LSTM模型实现新闻分类
薛定谔的日语学习小程序源码
Review notes of Zhang Haifan in introduction to software engineering (Sixth Edition)
【智能QbD风险评估工具】上海道宁为您带来LeanQbD介绍、试用、教程
latex如何打空格
宅男壁纸大全微信小程序源码-带动态壁纸支持多种流量主
Importance of EDA tools to chip industry knowledge popularization
杰理之、产线装配环节【篇】
What else do you not know about new set()
《軟件工程導論(第六版)》 張海藩 複習筆記