如何编写JS实现流畅顺滑的进度条详细步骤？

本文共计1139个文字，预计阅读时间需要5分钟。

进度条不顺利+信任大多前端同学都自己写过音视频播放器，实现并不复杂。最近在小程序里，做了一个类似微博刷视频的需求。其中，有一个功能需要实现自定义进度条。

进度条不顺滑

相信大多前端同学都自己写过音频、视频播放器，实现并不复杂。最近在小程序里，做了一个类似微博刷视频的需求。其中有一部分功能需要实现自定义进度条，在做完第一版之后发现进度条不顺滑，而后想查查网上看有没有什么好的方案，但最终没找到合适的。于是想看看微信小程序里的“微博”进度条如何，结果也是很生硬的动画，下面放了一个GIF，大家也可以自己搜索微信小程序的微博，找个视频看看效果。

常规方案

最终决定还是优化一下这个问题，先来捋一捋我们现有常规方案。

• 监听TimeUpdate事件
• 获取到当前播放时间，通过总时间计算进度百分比（currentTime / duration * 100）
• 进度条width属性设置进度百分比

现有的方案是依赖事件获取当前播放时间，而这个事件大概在100～350毫秒触发一次，下面是我记录的小程序的事件对象队列。