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