微信小程序video模拟实现进度条功能可拖拽

要实现微信小程序video组件的进度条可拖拽功能，可以使用以下步骤：

1. 在.wxml文件中，使用video组件，并加上一个view容器作为进度条的背景，再加上一个view作为进度条的滑块，代码如下：

<video src="{{src}}" poster="{{poster}}" bindtimeupdate="timeUpdate"></video>
<view class="progress-bar">
  <view class="progress" style="width: {{progress}}%;"></view>
  <view class="progress-btn" style="left: {{btnLeft}}px;"></view>
</view>

2. 在.wxss文件中，设置进度条和滑块的样式：

.progress-bar {
  position: relative;
  height: 6px;
  background-color: #ddd;
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background-color: #f00;
}
.progress-btn {
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #f00;
  box-shadow: 0 0 2px #f00;
  transform: translateX(-50%);
}

3. 在.js文件中，定义一个data对象，包含视频的总时长、当前播放时间、进度条长度和滑块位置等信息：

data: {
  src: 'http://www.example.com/video.mp4',
  poster: 'http://www.example.com/poster.jpg',
  duration: 0,
  currentTime: 0,
  progress: 0,
  btnLeft: 0,
}

4. 在onLoad生命周期函数中，获取视频的总时长：

onLoad: function() {
  var that = this;
  wx.createVideoContext('myVideo', that).requestFullScreen();
  wx.createVideoContext('myVideo', that).play();
  wx.createVideoContext('myVideo', that).pause();
  wx.createVideoContext('myVideo', that).seek(0);
  wx.createVideoContext('myVideo', that).play();
  wx.createVideoContext('myVideo', that).on('loadedmetadata', function(res) {
    that.setData({
      duration: res.duration
    });
  });
},

5. 在timeUpdate事件回调函数中，更新当前播放时间和进度条长度以及滑块位置：

timeUpdate: function(e) {
  var that = this;
  var currentTime = e.detail.currentTime;
  var duration = that.data.duration;
  var progress = Math.floor(currentTime / duration * 100);
  var btnLeft = progress * 3.4 - 7;
  that.setData({
    currentTime: currentTime,
    progress: progress,
    btnLeft: btnLeft
  });
},

6. 在进度条的view容器上，绑定touchstart、touchmove和touchend事件，实现滑动改变进度条长度和滑块位置：

touchstart: function(e) {
  var that = this;
  that.setData({
    startX: e.touches[0].pageX,
  });
},
touchmove: function(e) {
  var that = this;
  var startX = that.data.startX;
  var moveX = e.touches[0].pageX;
  var distance = moveX - startX;
  var duration = that.data.duration;
  var progress = that.data.progress + distance / 340 * 100;
  if (progress < 0) {
    progress = 0;
  } else if (progress > 100) {
    progress = 100;
  }
  var currentTime = progress / 100 * duration;
  var btnLeft = progress * 3.4 - 7;
  that.setData({
    progress: progress,
    currentTime: currentTime,
    btnLeft: btnLeft,
    startX: moveX,
  });
},
touchend: function(e) {
  var that = this;
  wx.createVideoContext('myVideo', that).seek(that.data.currentTime);
},

通过以上步骤，就可以实现微信小程序video组件的进度条可拖拽功能。