搜尋
首頁微信小程式小程式開發小程式如何實現視訊或音訊自訂可拖曳進度條

本篇文章帶給大家的內容是關於小程式如何實現影片或音訊自訂可拖曳進度條,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

小程式原生元件的音訊播放時並沒有進度條的顯示,而此次專案中,鑑於原生的視訊進度條樣式太醜,產品要求做一個可拖曳的進度條滿足需求。
視訊和音訊提供的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(&#39;myVideo&#39;);
    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 //完成拖动后允许更新滚动条
      })
    }
  },

暫停/播放影片

r​​rreee

總結:slider的最大值為100, step的值最小為1,這會導致視訊或音訊播放時間過長的時候,slider滑桿移動速度很慢,拖曳移動的時間間隔較大,使用者體驗差。

#

以上是小程式如何實現視訊或音訊自訂可拖曳進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:segmentfault思否。如有侵權,請聯絡admin@php.cn刪除

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器