この記事の内容は、小さなプログラムでビデオやオーディオのカスタマイズ可能なプログレス バーを実装する方法に関するものです。必要な方は参考にしていただければ幸いです。
このプロジェクトでは、ネイティブ ビデオのプログレス バーのスタイルがあまりにも醜いため、ミニ プログラムのネイティブ コンポーネントのオーディオ再生中にプログレス バーが表示されません。そのため、製品には、要件を満たすためにドラッグ可能なプログレス バーが必要です。ニーズ。
ビデオとオーディオによって提供される 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='{{true}}' bindtimeupdate="videoUpdate" objectFit="fill"></video> <view class='process-container'> <image src='{{playStates ? "../../assets/image/pause_icon.png" : "../../assets/image/play_icon.png"}}' class='video-controls-icon' bindtap='videoOpreation'></image> <view class='slider-container'> <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('myVideo'); 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 サイトの他の関連記事を参照してください。