title: Using a jQuery script to play video and pause and set time to 0, I get: this.currentTime = 0; Uncaught Error: INVALID_STATE_ERR
body: <p>I have several divs that hold video objects. They play on the click of a thumbnail. But I was having a problem with the videos continuing to play 'behind the scenes' if a user click another choice. So, I got this from a fellow Overflower to 'stop' the video, return it to the first frame, fade it out, and then fade in and play the next chosen video:</p>
  
  <p>Here's the jQuery script:</p>
  
  <pre><code>$(function(){
  $('div.video').hide();
  
  $('.icon').click(function(){
      var id=$(this).data('id'),
          thisDiv=$("div.video[data-id='" + id +"']"),
          thisVideo=$("div.video[data-id='" + id +"']").find('video');
  
      $('video').each(function () {
          this.pause();
          this.currentTime = 0;
      });
  
         $('div.video').not(thisDiv).fadeOut();
  
         thisDiv.fadeIn();      
         thisVideo.get(0).play();   
  });
  });
  </code></pre>
  
  <p>And the html of one of the eight divs for the video object:</p>
  
  <pre><code>&lt;div class="video" data-id="1" &gt;
  &lt;video width="auto" height="100%" controls="controls"&gt;
    &lt;source src="videos/video.mp4" type="video/mp4" /&gt;
    &lt;source src="videos/video.ogv" type="video/ogg" /&gt;
    &lt;source src="videos/video.webm" type="video/webm" /&gt;
  &lt;object data="videos/video.mp4" width="auto" height="100%"&gt;
    &lt;embed src="videos/video.swf" width="auto" height="100%" /&gt;
  &lt;/object&gt; 
  &lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And it works... Most of the time. Sometimes, I get the error:</p>
  
  <pre><code>this.currentTime = 0; Uncaught Error: INVALID_STATE_ERR: DOM Exception 11
  </code></pre>
  
  <p>In Chrome's error log. IE8 displays the same error.</p>
  
  <p>Does anyone know what this is all about? And what I can do to fix it?</p>