미니 프로그램에서 비디오 또는 오디오에 대한 사용자 정의 드래그 가능한 진행 표시줄을 구현하는 방법

이 기사의 내용은 미니 프로그램에서 비디오 또는 오디오에 대한 사용자 정의 가능한 드래그 가능한 진행 표시줄을 구현하는 방법에 대한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

미니 프로그램의 기본 구성 요소의 오디오 재생 중에는 진행률 표시줄이 표시되지 않습니다. 이 프로젝트에서는 기본 비디오 진행률 표시줄 스타일이 너무 보기 흉하기 때문에 제품에서 요구 사항을 충족하려면 드래그 가능한 진행률 표시줄이 필요합니다.
비디오와 오디오에서 제공하는 API는 대략 비슷하며, 다음 코드에 따라 오디오 관련 진행 표시줄로 수정할 수 있습니다.

wxml의 구조는 다음과 같습니다.

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

data는 SliderValue, updateState 및 playStates와 같은 여러 변수를 초기화합니다.

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

videoUpdate는 재생 진행률이 변경될 때 트리거되며 트리거 빈도는 250ms입니다. event.detail = {currentTime, Duration}, currentTime은 현재 시간을 나타내고, Duration은 총 지속 시간을 초 단위로 나타냅니다.

  videoUpdate(e) {
    if (this.data.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效
      let sliderValue = e.detail.currentTime / e.detail.duration * 100;
      this.setData({
        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 //完成拖动后允许更新滚动条
      })
    }
  },

동영상 일시 중지/재생

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

요약: 슬라이더의 최대값은 100이고, 단계의 최소값은 1입니다. 시간이 너무 길면 슬라이더가 매우 느리게 움직이고 드래그와 이동 사이의 시간 간격이 길고 사용자 경험이 좋지 않습니다.

위 내용은 미니 프로그램에서 비디오 또는 오디오에 대한 사용자 정의 드래그 가능한 진행 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!