Question

我的网站上有自定义视频进度条，效果很好。但是，进展更新是在数值之间跳跃，我试图平滑它。

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事件中控制.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

Try to add to .timeElapsed a transition. For example, transition: 100ms

流畅的视频进度条更新javascript

1 个答案: