So implementieren Sie einen benutzerdefinierten ziehbaren Fortschrittsbalken für Video oder Audio in einem Miniprogramm

Der Inhalt dieses Artikels befasst sich mit der Implementierung eines anpassbaren ziehbaren Fortschrittsbalkens für Video oder Audio in einem Miniprogramm. Ich hoffe, dass er für Sie hilfreich ist.

Beim Abspielen des Audios der nativen Komponente des Miniprogramms wird kein Fortschrittsbalken angezeigt. Da der Stil des nativen Video-Fortschrittsbalkens in diesem Projekt zu hässlich ist, benötigt das Produkt einen ziehbaren Fortschrittsbalken die Bedürfnisse erfüllen.
Die von Video und Audio bereitgestellten APIs sind im Großen und Ganzen ähnlich und können gemäß dem folgenden Code in einen audiobezogenen Fortschrittsbalken geändert werden.

Die Struktur von wxml ist wie folgt:

<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>

Mehrere Variablen wie sliderValue, updateState und playStates werden in Daten initialisiert.

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

videoUpdate wird ausgelöst, wenn sich der Wiedergabefortschritt ändert, mit einer Triggerfrequenz von 250 ms. event.detail = {currentTime, duration}, currentTime stellt die aktuelle Zeit dar und Dauer stellt die Gesamtdauer dar, beide in Sekunden.

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

Der Fortschrittsbalken kann gezogen und angegeben werden, um zur entsprechenden Position zu springen

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

Video anhalten/abspielen

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

Zusammenfassung: Der maximale Wert des Schiebereglers beträgt 100, Schritt Der Mindestwert ist 1, was dazu führt, dass sich der Schieberegler sehr langsam bewegt, wenn die Video- oder Audiowiedergabezeit zu lang ist, das Zeitintervall zum Ziehen und Verschieben groß ist und die Benutzererfahrung schlecht ist.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie einen benutzerdefinierten ziehbaren Fortschrittsbalken für Video oder Audio in einem Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!