title: Looping through Video Sources slows Chrome
body: <p>I have two video sources that are outputted to my page via ajax (the second is hidden). I play the first one and bind an event onto it so that when it has ended the next video is played and shown whilst the first is then paused, rewinded back to 0, and the process continues.</p>
  
  <p>here is my code.</p>
  
  <pre><code>function queueVideos(num, amount) {
  
      if (num &lt; amount) {
          document.getElementById('video-element-'+num).addEventListener('ended', playNextClip, false);
          function playNextClip() {
              var nextVid = num + 1;
              $( '#video-element-' + nextVid ).show().get(0).play();
              $( '#video-element-' + num ).hide();
              document.getElementById( 'video-element-' + num ).pause();
              document.getElementById( 'video-element-' + num ).currentTime = 0;
              queueVideos(nextVid, amount)
          }
      }
  
      if (num == amount) {
          document.getElementById('video-element-'+num).addEventListener('ended', playFirst, false);
          function playFirst() {
              $( '#video-element-1' ).show().get(0).play();
              $( '#video-element-' + num ).hide();
              document.getElementById( 'video-element-' + num ).pause();
              document.getElementById( 'video-element-' + num ).currentTime = 0;
              queueVideos(1, amount);
          }
      }
  
  }
  </code></pre>
  
  <p>The code is called within an ajax function that feeds it the num and amount from data i get elsewhere, for arguments sake let's say i'm running it like so:</p>
  
  <pre><code>queueVideos(1, 2);
  </code></pre>
  
  <p>My problem is that after around 1 minute the transitions between the clips get laggy, the clips pause unexpectedly, and ultimately the browser (chrome) performs slowly.</p>
  
  <p>How can I fix this?</p>
  
  <p>Thanks!</p>