title: smooth video progress bar update javascript
body: <p>I have a custom video progress bar on my site which is working well.
  But the progression update is jumping between values and I'm trying to smooth it.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;video id ="myVideo"&gt;
   &lt;source src="myvideo.mp4"&gt;
  &lt;/video&gt;
  
  &lt;div class="progress"&gt;
    &lt;div class="timeElapsed"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>.progress
    width: 100%
    height: 8px
    background: #fff
    position: absolute
    bottom: 0
    .timeElapsed
      position: absolute
      height: 100%
      width: 0%
      background: #000
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>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 + '%'
  })
  </code></pre>
  
  <p>When I console.log(percentage) in my timeupdate event, I have this output : </p>
  
  <pre><code>0.14095513960976902
  0.3264236667597889
  0.6970909117642735
  1.0636110335092854
  1.2511968652129803
  1.435445001543868
  1.79435606004911
  1.9811530487715225
  2.1658047962829547
  2.532771904544853
  2.7182242578406437
  </code></pre>
  
  <p>With this result and the way it's displayed in the console I know that I'm missing something but I don't know what, any solution here ?</p>