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