微信小程序video自定义进度条

要自定义微信小程序video的进度条，可以使用wx.createVideoContext()方法获取video组件实例，然后通过该实例的属性和方法来实现自定义进度条的效果。

以下是一个简单的示例代码：

wxml文件部分：

<video src="{{src}}" id="myVideo"></video>
<view class="progress-bar" style="width: {{progress}}%;"></view>

js文件部分：

Page({
  data: {
    src: '视频地址',
    duration: 0, // 视频总时长
    currentTime: 0, // 当前播放时间
    progress: 0 // 进度条进度
  },
  onLoad: function () {
    // 获取video组件实例
    this.videoContext = wx.createVideoContext('myVideo', this);
    // 监听视频播放时间变化事件
    this.videoContext.onTimeUpdate(this.handleTimeUpdate);
    // 获取视频总时长
    this.videoContext.duration((duration) => {
      this.setData({
        duration: duration
      });
    });
  },
  handleTimeUpdate: function (e) {
    // 更新当前播放时间和进度条进度
    this.setData({
      currentTime: e.detail.currentTime,
      progress: e.detail.currentTime / this.data.duration * 100
    });
  }
});

css文件部分：

.progress-bar {
  height: 6px;
  background-color: #ccc;
}

在上述代码中，我们首先通过wx.createVideoContext()方法获取video组件实例，然后在onLoad()生命周期函数中监听视频播放时间变化事件，并获取视频总时长。在handleTimeUpdate()函数中，我们更新当前播放时间和进度条进度，最后在wxml文件中使用style属性来设置进度条的宽度。

需要注意的是，为了让Video组件支持进度条拖动功能，还需要在wxml文件中添加bindtouchstart、bindtouchmove和bindtouchend事件，并在js文件中添加相应的处理函数。