Video/Audio禁止快進(退)


  首先接着上個隨筆。上個隨筆主要介紹了視頻音頻的相關操作、屬性和方法。這里主要記錄一個應用:禁止快進(快退同理)。

  思路:監聽快進事件(此處是監聽播放時間更新),利用一個緩存的時間和播放到的時間進行對比,如果時間大於1秒(保險起見使用2秒,以避免在播放的時刻正好在計時的那一刻的尷尬),則表明是快播,給其重置回播放時間即可。

  代碼:

 1 <video
 2     id="kingdom-video"
 3     :src="xxx"
 4     preload
 5     controls
 6     v-if="type==='video'">
 7     </video>
 8 
 9 onTimeUpdate() {
10       // 學習中
11       if (this.playObj.effectiveDuration < this.playObj.totalDuration) {
12         // 禁止快進
13         if (this.videoAss.currentTime - this.lastTimeString > 2) {
14           this.videoAss.currentTime = this.lastTimeString
15         } else {
16           this.lastTimeString = this.videoAss.currentTime
17         }
18       }
19 }
20 this.videoAss = document.getElementById('kingdom-video')
21     this.videoAss.addEventListener('timeupdate', () => { this.onTimeUpdate() })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM