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

chengtao1633 发布于2019-08-21 17:15 / 1951人阅读

摘要：使用做视频播放器进度条小记问题从头播放时，进度条随视频播放的进行而前进但是一旦对进度条拖动，视频可以继续播，但是进度条不再继续前进。成功失败成功分析上例中，直接运行，进度条不断前进。

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

GPU云服务器云服务器播放器进度条 js视频进度条 js 视频进度条 js控制视频进度条

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89306.html

Day11 - 自定义视频播放器

摘要：自定义视频播放器微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者简介是推出的一个天挑战。 Day11 - 自定义视频播放器 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视...

SKYZACK 2019-08-20 18:26 评论0 收藏0
基于Vue的事件响应式进度条组件

摘要：事件响应式进度条的应用场景主要是自定义播放器的进度条。效果图以上就是可以利用本组件实现的一些效果，他们都能响应和两种事件。部分对现在就有需求使用这个带事件的进度条的同学来说，看看这部分，可以帮助你自己修改完善它。写在前面找了很多vue进度条组件，都不包含拖拽和点击事件，input range倒是原生包含input和change事件，但是直接基于input range做进度条的...

renweihub 2019-08-26 11:36 评论0 收藏0
iOS短视频播放缓存之道

摘要：一套基于短视频播放缓存库地址。由于针对短视频的播放不存在进度拖拽或功能，所以每次下载到的数据可以直接通过缓存管理的相关方法直接到缓存文件末尾。一套基于AVPLayer短视频播放缓存库ShortMediaCache GitHub地址。主要特点： 1.为短视频量身设计，接入方便，不侵占业务 2.边播变缓存，缓存后直接播放 3.预加载功能，秒播下一条短视频 4.自动缓存管理原文地址...

OnlyLing 2019-08-06 13:37 评论0 收藏0