Comment implémenter une barre de progression déplaçable personnalisée pour la vidéo ou l'audio dans un mini-programme

Le contenu de cet article explique comment implémenter une barre de progression personnalisable et déplaçable pour la vidéo ou l'audio dans un mini-programme. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aucune barre de progression n'est affichée lors de la lecture de l'audio du composant natif du mini programme. Dans ce projet, le style de la barre de progression vidéo native étant trop laid, le produit nécessite une barre de progression déplaçable. répondre aux besoins.
Les API fournies par la vidéo et l'audio sont à peu près similaires et peuvent être modifiées en une barre de progression liée à l'audio selon le code suivant.

La structure de wxml est la suivante :

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

Plusieurs variables telles que sliderValue, updateState et playStates sont initialisées dans data.

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

videoUpdate est déclenché lorsque la progression de la lecture change, avec une fréquence de déclenchement de 250 ms. event.detail = {currentTime, duration}, currentTime représente l'heure actuelle et duration représente la durée totale, toutes deux en secondes.

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

La barre de progression peut être glissée et spécifiée pour accéder à la position correspondante de la vidéo

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

Mettre en pause/lire la vidéo

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

Résumé : Le plus grand avantage du curseur La valeur est de 100 et la valeur minimale du pas est de 1. Cela entraînera un déplacement très lent du curseur lorsque le temps de lecture vidéo ou audio est trop long, l'intervalle de temps pour glisser et se déplacer est grand, et l'expérience utilisateur est médiocre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!