流畅的视频进度条更新javascript答案

【问题标题】：smooth video progress bar update javascript流畅的视频进度条更新javascript
【发布时间】：2018-07-10 10:31:18
【问题描述】：

我的网站上有一个自定义视频进度条，效果很好。但是进度更新在值之间跳跃，我正在尝试使其平滑。

HTML：

<video id ="myVideo">
 <source src="myvideo.mp4">
</video>

<div class="progress">
  <div class="timeElapsed"></div>
</div>

SASS：

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

当我在 timeupdate 事件中使用 console.log(percentage) 时，我有这个输出：

0.14095513960976902
0.3264236667597889
0.6970909117642735
1.0636110335092854
1.2511968652129803
1.435445001543868
1.79435606004911
1.9811530487715225
2.1658047962829547
2.532771904544853
2.7182242578406437

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

【问题讨论】：

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

标签： javascript html sass

【解决方案1】：

尝试向.timeElapsed 添加一个过渡。例如transition: 100ms

【讨论】：