大體思路：先在wxml檔案中定義一個進度條，然後在視訊上定義播放進度變化時觸發bindtimeupdate這個屬性，進而進度條值改變觸發sliderChanging()和sliderChange()方法。

1、定義進度條

<view class='process-container'>
    <view class='slider-container'>
        <slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="
 
{{sliderValue}}"
                backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83"  />
    </view>
</view>

2、在video標籤繫結播放時間改變videoUpdate()方法

<video id="videoplayer" class='player' src="{{url}}" autoplay="true" bindtimeupdate="videoUpdate"></video>

3、觸發進度條並跳轉對應播放時間，貼出整個js程式碼

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    url: "",
    sliderValue: 0, //控制進度條slider的值，
    updateState: false, //防止視訊播放過程中導致的拖拽失效
  },

  onLoad: function (options) {
    // 生命週期函式--監聽頁面載入
    this.setData({
      url: options.url,
    })
  },
  onReady: function (res) {
    this.videoContext = wx.createVideoContext
 
('videoplayer');
    this.setData({
      updateState: true
    })
  },
  //播放條時間改表觸發
  videoUpdate(e) {
    if (this.data.updateState) { //判斷拖拽完成後才觸發更新，避免拖拽失效
      let sliderValue = e.detail.currentTime / e.detail.duration * 100;
      this.setData({
        sliderValue: 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 //完成拖動後允許更新滾動條
      })
    }
  }
})

參考資源：

https://www.w3xue.com/exp/article/201810/2181.html