title: HTML5 video with javascript loop
body: <p>not had much luck in trying to figure this out.</p>
  
  <p>I have a video tag with a video in like so:</p>
  
  <pre><code>    &lt;video id="video" preload="auto" tabindex="0" controls poster="img/layout/Untitled-1.jpg"&gt;
          &lt;source type="video/mp4" src="video/1.mp4" &gt;
          Sorry, your browser does not support HTML5 audio.
      &lt;/video&gt;
      &lt;ul id="playlist"&gt;
          &lt;li class="active"&gt;&lt;a href="video/1.mp4"&gt;GetFighted&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="video/2.mp4"&gt;ThatGirlPossessed&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="video/3.mp4"&gt;WhiteDevil&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>And using javascript and jquery im trying to loop through the list items (this list could be longer or shorter it will be user controlled ) and put them into the video itself, this works fine with this:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      var video;
      var playlist;
      var tracks;
      var current;
  
  
      init();
      function init(){
          current = 0;
          video = $('video');
          playlist = $('#playlist');
          tracks = playlist.find('li a');
          len = tracks.length;
          video[0].volume = .50;
          playlist.find('a').click(function(e){
              e.preventDefault();
              link = $(this);
              current = link.parent().index();
              run(link, video[0]);
          });
  
          video[0].addEventListener('ended',function(e){
              $('#video').animate({opacity: 0}, 500);
              setTimeout(function(){
                  current++;
                  if(current == len){
                      current = 0;
                      link = playlist.find('a')[0];
                      console.log('here 1');  
                  } else  {
                      link = playlist.find('a')[current];
                      console.log('here');    
                  }
  
                  $('#video').animate({opacity: 1}, 500);
                  run($(link),video[0]);
              },500);
          });
      }
  
      function run(link, player){
              player.src = link.attr('href');
              par = link.parent();
              par.addClass('active').siblings().removeClass('active');
              video[0].load();
              video[0].play();
      }
  
  
  });
  </code></pre>
  
  <p>(this code was taken from another source as a reference, i forget where). However what i am having trouble in doing is stopping the video once it has looped through all 3. The console log 'here 1' triggers once all 3 videos have played but i can't figure how to stop the video once it has played through once.</p>
  
  <p>Any help would be fantastic.</p>