資訊專欄INFORMATION COLUMN
摘要：使用做視頻播放器進度條小記問題從頭播放時，進度條隨視頻播放的進行而前進但是一旦對進度條拖動，視頻可以繼續播，但是進度條不再繼續前進。成功失敗成功分析上例中，直接運行，進度條不斷前進。
使用input range做視頻播放器進度條bug小記 問題
從頭播放時，進度條隨視頻播放的進行而前進；但是一旦對進度條拖動，視頻可以繼續播，但是進度條不再繼續前進。打印input range的value值，也確實是在不斷增加的，但就是外觀上進度條上的“進度小球”不再沿著進度條前進。
因為項目代碼邏輯復雜，就單拎出一個例子來做，找出了問題所在。
下面是例子。
···
···
上例中，直接運行，進度條不斷前進。
1、項目中出錯是因為使用了range.attr("value", tick);這樣的操作input range value的方式。不過這樣的方式，仍然可以使進度條的value不斷增加的，只是外觀上進度小球不沿著進度條前進。這也是我在項目中debug此問題時多耗了點時間的原因。畢竟value值對，為啥進度條不走呢！
2、使用原生value，也就是不使用jQuery的話，也不會有這個問題。
3、使用jQuery，就用range.prop("value", tick);操作input range的value?？梢垣@得正確結果。
4、成功的操作方式，其比較結果是true；attr方式設置的值跟另外兩種成功的方式獲取的值比較，結果為false。
jQuery中attr用于獲取/設置自定義屬性；prop用于獲取/設置DOM固有屬性；
搜了一下，網上還有一些例子都是因為attr和prop的使用混亂造成的bug。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89306.html
摘要：自定義視頻播放器微信公眾號開發企業級產品全棧開發速成周末班首期班號正式開班，歡迎搶座作者簡介是推出的一個天挑戰。 Day11 - 自定義視頻播放器 (Node+Vue+微信公眾號開發)企業級產品全棧開發速成周末班首期班(10.28號正式開班，歡迎搶座) 作者：?liyuechun 簡介：JavaScript30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視...
摘要：事件響應式進度條的應用場景主要是自定義播放器的進度條。效果圖以上就是可以利用本組件實現的一些效果，他們都能響應和兩種事件。部分對現在就有需求使用這個帶事件的進度條的同學來說，看看這部分，可以幫助你自己修改完善它。 寫在前面 找了很多vue進度條組件，都不包含拖拽和點擊事件，input range倒是原生包含input和change事件，但是直接基于input range做進度條的...
摘要：一套基于短視頻播放緩存庫地址。由于針對短視頻的播放不存在進度拖拽或功能，所以每次下載到的數據可以直接通過緩存管理的相關方法直接到緩存文件末尾。 一套基于AVPLayer短視頻播放緩存庫ShortMediaCache GitHub地址。 主要特點： 1.為短視頻量身設計，接入方便，不侵占業務 2.邊播變緩存，緩存后直接播放 3.預加載功能，秒播下一條短視頻 4.自動緩存管理 原文地址...
閱讀 2953·2021-11-23 09:51
閱讀 1006·2021-09-26 09:55
閱讀 3935·2021-09-22 14:58
閱讀 1468·2021-09-08 09:35
閱讀 1078·2021-08-26 14:16
閱讀 882·2019-08-23 18:17
閱讀 2054·2019-08-23 16:45
閱讀 700·2019-08-23 15:55
