小程序原生组件的音频播放时并没有进度条的显示, 而此次项目中, 鉴于原生的视频进度条样式太丑, 产品要求做一个可拖拽的进度条满足需求.
视频和音频提供的 API 大致是相似的, 可以根据以下代码修改为与音频相关的进度条.
wxml 的结构如下:
- <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls="{{false}}" autoplay='{{true}}' bindtimeupdate="videoUpdate" objectFit="fill"></video>
- <view class='process-container'>
- <image src='{{playStates ?"../../assets/image/pause_icon.PNG":"../../assets/image/play_icon.PNG"}}' class='video-controls-icon' bindtap='videoOpreation'></image>
- <view class='slider-container'>
- <slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="{{sliderValue}}" backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83" />
- </view>
- </view>
data 中初始化了 sliderValue, updateState, playStates 几个变量.
- data: {
- sliderValue: 0, // 控制进度条 slider 的值,
- updateState: false, // 防止视频播放过程中导致的拖拽失效
- playStates: true // 控制播放 & 暂停按钮的显示
- },
- onReady: function () {
- this.videoContext = wx.createVideoContext('myVideo');
- this.setData({
- updateState: true
- })
- },
videoUpdate 在播放进度变化时触发, 触发频率 250ms 一次. event.detail = {currentTime, duration},currentTime 表示当前时间, duration 表示总时长, 都以秒为单位.
- videoUpdate(e) {
- if (this.data.updateState) { // 判断拖拽完成后才触发更新, 避免拖拽失效
- let sliderValue = e.detail.currentTime / e.detail.duration * 100;
- this.setData({
- sliderValue,
- duration: e.detail.duration
- })
- }
- },
进度条可拖拽并指定视频跳转到相应的位置
- sliderChanging(e) {
- this.setData({
- updateState: false // 拖拽过程中, 不允许更新进度条
- })
- },
- sliderChange(e) {
- if (this.data.duration) {
- this.videoContext.seek(e.detail.value / 100 * this.data.duration); // 完成拖动后, 计算对应时间并跳转到指定位置
- this.setData({
- sliderValue: e.detail.value,
- updateState: true // 完成拖动后允许更新滚动条
- })
- }
- },
暂停 / 播放视频
- videoOpreation() {
- this.data.playStates ? this.videoContext.pause() : this.videoContext.play();
- this.setData({
- playStates: !this.data.playStates
- })
- },
总结: slider 的最大值为 100, step 的值最小为 1, 这会导致视频或音频播放时间过长的时候, slider 滑块移动速度很慢, 拖拽移动的时间间隔较大, 用户体验差.
来源: http://www.jb51.net/article/148266.htm