title: Selecting the HTML5 Video Object with jQuery
body: <p>Im having problems getting at the HTML5 video tag with jQuery. Here is my code:</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;video id="vid" height="400" width="550"&gt;
  &lt;source src="movie.mp4" type="video/mp4"&gt;
  &lt;source src="movie.ogv" type="video/ogg"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>function playVid(){
      console.log($('#vid'));
      console.log($('#vid')[0]);
      $('#vid')[0].currentTime=5;
      $('#vid')[0].play()
  }
  
  $(document).ready(){
      playVid();
  }
  </code></pre>
  
  <p>The code breaks on the <code>.currentTime</code> line with the following error:</p>
  
  <pre><code>InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
  </code></pre>
  
  <p>Here is the bit that I cant figure out - the first <code>console.log</code> shows the object I would expect, inside this object is another object called <code>0</code> and this holds all the HTML5 video properties and methods you would expect, including <code>.currentTime</code>. </p>
  
  <p>However as soon as I do the second log of <code>$('#vid')[0]</code> it shows the HTML code for the video tag, and not the object I was after called <code>0</code>. I get the exact same results for <code>console.log($('#vid')["0"])</code> and <code>console.log($('#vid').get(0))</code>.</p>
  
  <p>Is there a way of getting at the object called <code>0</code> in the object returned by <code>$('#vid')</code> that works in jQuery?</p>