title: pausing and playing multiple HTML5 videos using jQuery get(0) indexing?
body: <p>I have a page of several videos. One can click a thumbnail to play each video. The problem is for that for greater than 2 videos, the clicking on the 3rd thumbnail doesn't pause the 2nd video so I get 2 videos playing at the same time. I'm also using a <code>fadeOut()</code> to toggle the visibility of each video and this works fine regardless of the number of videos. Therefore, I think the issue is with the <code>get(0)</code> part of the code.</p>
  
  <p>here's a jsfiddle that displays the problem:
  <a href="http://jsfiddle.net/trpeters1/EyZdy/28/" rel="nofollow">http://jsfiddle.net/trpeters1/EyZdy/28/</a> </p>
  
  <p>Additionally, here's a more verbose block of code that should make the problem clear:</p>
  
  <pre><code>$(function(){
        $('#video_1,#video_2,#video_3,#video_4,#video_5,#video_6').hide();
  
        $('.icon_1').click(function(){
              $('#video_2,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                    $('#video_1').fadeIn();
              $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).pause();
              $('.video_2,.video_3,.video_4,.video_5,.video_6').get(0).currentTime = 0;
              $('.video_1').get(0).play();
              });
        });
  
  
        $('.icon_2').click(function(){
              $('#video_1,#video_3,#video_4,#video_5,#video_6').fadeOut(function(){
                    $('#video_2').fadeIn();
              $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
              $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
              $('.video_2').get(0).play();
              });
        });
  
        $('.icon_3').click(function(){
              $('#video_1,#video_2,#video_4,#video_5,#video_6').fadeOut(function(){
                    $('#video_3').fadeIn();
              $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).pause();
              $('.video_1,.video_2,.video_4,.video_5,.video_6').get(0).currentTime = 0;
              $('.video_3').get(0).play();
              });
        });
  });
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div id="video_1"&gt;
  &lt;div id="mediaplayer"&gt;cadillac&lt;/div&gt;
      &lt;video class="video_1" width="100%" height="100%" controls="controls"&gt;
          &lt;source src="videos/cadillac_x264.mp4" type="video/mp4" /&gt;
      &lt;object data="videos/cadillac_x264.mp4" width="100%" height="100%"&gt;
  &lt;/object&gt; 
  &lt;/video&gt;
  &lt;/div&gt;
  
  &lt;div id="video_2"&gt;
  &lt;div id="mediaplayer2"&gt;nike&lt;/div&gt;
      &lt;video class="video_2" width="100%" height="100%" controls="controls"&gt;
      &lt;source src="videos/Nike_Pretty - Computer_x264.mp4" type="video/mp4" /&gt;
  &lt;object data="videos/Nike_Pretty - Computer_x264.mp4" width="100%" height="100%"&gt;
  &lt;/object&gt; 
  &lt;/video&gt;
  &lt;/div&gt;
  
  &lt;div id="video_3"&gt;
  &lt;div id="mediaplayer3"&gt;russian standard&lt;/div&gt;
      &lt;video class="video_3" width="100%" height="100%" controls="controls"&gt;
      &lt;source src="videos/Russian_Standard.mp4" type="video/mp4" /&gt;
  &lt;object data="videos/Russian_Standard.mp4" width="100%" height="100%"&gt;
  &lt;/object&gt; 
  &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>