ミニプログラムでビデオまたはオーディオのドラッグ可能なカスタムプログレスバーを実装する方法-ミニプログラム開発-php.cn

ミニプログラムでビデオまたはオーディオのドラッグ可能なカスタムプログレスバーを実装する方法

不言

リリース： 2018-09-30 16:17:13

転載

7487 人が閲覧しました

この記事の内容は、小さなプログラムでビデオやオーディオのカスタマイズ可能なプログレスバーを実装する方法に関するものです。必要な方は参考にしていただければ幸いです。

このプロジェクトでは、ネイティブビデオのプログレスバーのスタイルがあまりにも醜いため、ミニプログラムのネイティブコンポーネントのオーディオ再生中にプログレスバーが表示されません。そのため、製品には、要件を満たすためにドラッグ可能なプログレスバーが必要です。ニーズ。
ビデオとオーディオによって提供される 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>

ログイン後にコピー

sliderValue、updateState、playStates などのいくつかの変数がデータ内で初期化されます。

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

ログイン後にコピー

videoUpdate は、再生の進行状況が変化するとトリガー頻度が 250 ミリ秒でトリガーされます。 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 で、ステップの最大値は 100 です。最小値は 1 です。ビデオまたはオーディオの再生時間が長すぎる場合、ドラッグと移動の時間間隔が長い場合、およびユーザーエクスペリエンスが低下する場合、スライダーの動きが非常に遅くなります。。

以上がミニプログラムでビデオまたはオーディオのドラッグ可能なカスタムプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。