使用input range做视频播放器进度条bug小记

2024年4月23日 223次阅读 来源: cunzaizhuyi

使用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。

    原文作者：cunzaizhuyi
    原文地址: https://segmentfault.com/a/1190000011710565
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞