vue2.0实现音乐_视频播放进度条组件
来源:
中文源码网 浏览:269 次 日期:2024-04-25 09:46:03
【下载文档: vue2.0实现音乐_视频播放进度条组件.txt 】
vue2.0实现音乐/视频播放进度条组件
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释,具体内容如下
需求分析:
①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度;时间实时更新。
②:当滑动按钮时,实时更新播放时间,橙色进度条长度也会随着按钮的滑动而改变,当滑动结束时,橙色区域停留在滑动结束的位置,歌曲从当前进度开始播放。
③:点击进度条,橙色进度条长度变为点击处至起点的长度,并从当前点开始播放歌曲。
大概思路:
①:左边的时间可以通过audio播放时派发的timeupdate事件获取,右边的时间为接口获取的当前歌曲的总时间。
②:进度条子组件的长度通过父组件传入一个percent值计算,percent值为播放进度与总进度的比值。
③:进度条的滑动及点击结束后,需要向父组件传递一个percent值,使用this.$emit()像父组件派发事件,父组件中设置事件响应函数,接收percent参数值,用于改变audio中当前播放的音乐进度。
详细实现,关键代码已经注释:
先上组件源码:
@touchstart.prevent = "progressTouchStart"
@touchmove.prevent = "progressTouchMove"
@touchend = "progressTouchEnd"
>
此为progerss-bar.vue组件源码,组件所需要父组件传入的值只有一个“percent”,为父组件中audio当前播放时间与总时间的比值,用于计算此组件中橙色进度条的长度。
@percentChange为子组件中派发过来的事件,详细请看子组件中源码及注释“_triggerPercent()”部分,此事件调用的方法用于接收子组件传过来的拖动按钮、点击进度条改变歌曲播放进度后的播放百分比,用于改变父组件中audio标签的currentTime,进而将歌曲播放进度设置为当前时间。