使用input range做视频播放器进度条bug小记
问题
从头播放时,进度条随视频播放的进行而前进;但是一旦对进度条拖动,视频可以继续播,但是进度条不再继续前进。打印input range的value值,也确实是在不断增加的,但就是外观上进度条上的“进度小球”不再沿着进度条前进。
因为项目代码逻辑复杂,就单拎出一个例子来做,找出了问题所在。
下面是例子。
···
<body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<input type="range" id="range" min="0" max="100" step="1">
<script>
let range = $("#range");
range.attr("value", 0);
range.click(function () {
console.log(this.value);
});
let tick = 0 ;
setInterval(function () {
tick++;
range.prop("value", tick);//成功
//range.attr("value", tick);//失败
//range.get(0).value = tick;//成功
console.log(range.get(0).value === range.prop("value"));//true
console.log(range.get(0).value === range.attr("value"));//false
}, 100);
</script>
</body>
···
分析
上例中,直接运行,进度条不断前进。
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://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。