小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。

wxml的结构如下:

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滑块移动速度很慢,拖拽移动的时间间隔较大,用户体验差。