小程序视频自定义进度条_微信小程序video怎样控制进度条样式

大体思路：先在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>
1
2
3
4
5
6

2、在video标签绑定播放时间改变videoUpdate()方法

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

1
2

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 //完成拖动后允许更新滚动条
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

参考资源：

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