平滑视频进度条更新javascript

我有一个自定义的视频进度条在我的网站上，这是工作得很好。 但是进度更新在值之间跳跃，我正在尝试平滑它

HTML:

JS:

当我在timeupdate事件中输入console.log（百分比）时，我有以下输出：

0.14095513960976902
0.3264236667597889
0.6970909117642735
1.0636110335092854
1.2511968652129803
1.435445001543868
1.79435606004911
1.9811530487715225
2.1658047962829547
2.532771904544853
2.7182242578406437

---

根据这个结果以及它在控制台中的显示方式，我知道我缺少了一些东西，但我不知道什么，这里有什么解决方案吗？

尝试添加到

。timeappeased

转换。例如，

transition:100ms

我会使用JQuery动画来实现这一点，它为您完成平滑处理的艰苦工作。另一种选择是更频繁地定期更新，同时确保报告的进度足够精确。

.progress
  width: 100%
  height: 8px
  background: #fff
  position: absolute
  bottom: 0
  .timeElapsed
    position: absolute
    height: 100%
    width: 0%
    background: #000

var myVideo = document.querySelector('#myVideo'),
    progress = document.querySelector('.progress'),
    timeElapsed = document.querySelector('.timeElapsed'),
    duration,
    percentage,
    currentTime;

myVideo.addEventListener('timeupdate', function(){
  duration = myVideo.duration
  currentTime = myVideo.currentTime
  percentage = (100 /duration) * currentTime
  timeElapsed.style.width = percentage + '%'
})

0.14095513960976902
0.3264236667597889
0.6970909117642735
1.0636110335092854
1.2511968652129803
1.435445001543868
1.79435606004911
1.9811530487715225
2.1658047962829547
2.532771904544853
2.7182242578406437