小程序视频或音频自定义可拖拽进度条的示例代码(1/2)

本篇文章主要介绍了" 小程序视频或音频自定义可拖拽进度条的示例代码"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似...

小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。
视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。

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
   })
  }
 },

进度条可拖拽并指定视频跳转到相应的位置