title: Capture frames from video with HTML5 and JavaScript
body: <p>I want to capture a frame from video every 5 seconds. </p>
  
  <p>This is my JavaScript code:</p>
  
  <pre><code>video.addEventListener('loadeddata', function() {
      var duration = video.duration;
      var i = 0;
  
      var interval = setInterval(function() {
          video.currentTime = i;
          generateThumbnail(i);
          i = i+5;
          if (i &gt; duration) clearInterval(interval);
      }, 300);
  });
  
  function generateThumbnail(i) {     
      //generate thumbnail URL data
      var context = thecanvas.getContext('2d');
      context.drawImage(video, 0, 0, 220, 150);
      var dataURL = thecanvas.toDataURL();
  
      //create img
      var img = document.createElement('img');
      img.setAttribute('src', dataURL);
  
      //append img in container div
      document.getElementById('thumbnailContainer').appendChild(img);
  }
  </code></pre>
  
  <p>The problem I have is the 1st two images generated are the same and the duration-5 second image is not generated. I found out that the thumbnail is generated before the video frame of the specific time is displayed in <code>&lt; video&gt;</code> tag. </p>
  
  <p>For example, when <code>video.currentTime = 5</code>, image of frame 0s is generated. Then the video frame jump to time 5s. So when <code>video.currentTime = 10</code>, image of frame 5s is generated.</p>