流畅的视频进度条更新JavaScript

Question

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

.HTML：

<video id ="myVideo">
 <source src="myvideo.mp4">
</video>
<div class="progress">
  <div class="timeElapsed"></div>
</div>

屁股：

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

.JS：

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 + '%'
})

当我在时间更新事件中控制台.log(百分比(时，我有以下输出：

0.14095513960976902
0.3264236667597889
0.6970909117642735
1.0636110335092854
1.2511968652129803
1.435445001543868
1.79435606004911
1.9811530487715225
2.1658047962829547
2.532771904544853
2.7182242578406437

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

Answer 1

尝试添加到.timeElapsed过渡中。例如，transition: 100ms