title: jquery get Child elements of <video> tag
body: <p>I am working on changing the <code>src</code> attributes on the <code>&lt;source&gt;</code> elements inside my <code>&lt;video&gt;</code> element.</p>
  
  <p><strong>Original Markup</strong></p>
  
  <pre><code>&lt;video id='myVidID' class='video-js vjs-default-skin' controls autoplay preload='auto' width='1280' height='720' poster='poster.jpg' data-setup='{}'&gt;
  
  &lt;source src='uploads/video/static/vid1.mp4' type='video/mp4'&gt;
  &lt;source src='uploads/video/static/vid1.webm' type='video/webm'&gt;
  
  Whoops. Your browser does not Support HTML5 or Flash. Please upgrade your browser.
  
  &lt;/video&gt;
  </code></pre>
  
  <p>I want to:</p>
  
  <p>Get the video container (element), and then reference child1, and then child2 (0,1).</p>
  
  <p>My code seems to change the runtime added <code>src</code> attribute in the <code>&lt;video&gt;</code>  tag (<code>&lt;video src=''</code>) instead of the two child source tags' <code>src</code> attributes.</p>
  
  <p>P.S. My script runs, and does change the <code>src</code> attribute in the video tag (Which is not the intended change).</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  var myVideo = videojs("myVidID");
  
  function onComplete(){
  var child = $('#myVidID').children();
  child[0].src = 'uploads/video/demovid-01-02-2014.mp4';
  child[1].src = 'uploads/video/demovid-01-02-2014.webm';
  
  myVideo.load();
  myVideo.play();
  myVideo.off('ended', onComplete);
  };
  
  myVideo.on('ended', onComplete);
  
  &lt;/script&gt;
  </code></pre>