How to implement a custom draggable progress bar for video or audio in a mini program

The content of this article is about how to implement a customizable draggable progress bar for video or audio in a small program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There is no progress bar displayed when playing the audio of the native component of the mini program. In this project, since the style of the native video progress bar is too ugly, the product requires a draggable progress bar to meet the needs.
The APIs provided by video and audio are roughly similar and can be modified into an audio-related progress bar according to the following code.

The structure of wxml is as follows:

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls="{{false}}" autoplay=&#39;{{true}}&#39; bindtimeupdate="videoUpdate" objectFit="fill"></video>
<view class=&#39;process-container&#39;>
    <image src=&#39;{{playStates ? "../../assets/image/pause_icon.png" : "../../assets/image/play_icon.png"}}&#39; class=&#39;video-controls-icon&#39; bindtap=&#39;videoOpreation&#39;></image>
     <view class=&#39;slider-container&#39;>
      <slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="{{sliderValue}}" backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83"    />
    </view>  
</view>

Several variables such as sliderValue, updateState, and playStates are initialized in data.

  data: {
    sliderValue: 0, //控制进度条slider的值，
    updateState: false, //防止视频播放过程中导致的拖拽失效
    playStates: true //控制播放 & 暂停按钮的显示
  },
  onReady: function () {
    this.videoContext = wx.createVideoContext('myVideo');
    this.setData({
      updateState: true
    })
  },

videoUpdate is triggered when the playback progress changes, with a trigger frequency of 250ms. event.detail = {currentTime, duration}, currentTime represents the current time, and duration represents the total duration, both in seconds.

  videoUpdate(e) {
    if (this.data.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
      let sliderValue = e.detail.currentTime / e.detail.duration * 100;
      this.setData({
        sliderValue,
        duration: e.detail.duration
      })
    }
  },

The progress bar can be dragged and specified to jump to the corresponding position

  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 //完成拖动后允许更新滚动条
      })
    }
  },

Pause/play video

  videoOpreation() {
    this.data.playStates ? this.videoContext.pause() : this.videoContext.play();
    this.setData({
      playStates: !this.data.playStates
    })
  },

Summary: The maximum value of slider is 100, and the maximum value of step is 100. The minimum value is 1, which will cause the slider to move very slowly when the video or audio playback time is too long, the time interval between dragging and moving is large, and the user experience is poor.

The above is the detailed content of How to implement a custom draggable progress bar for video or audio in a mini program. For more information, please follow other related articles on the PHP Chinese website!