title: Changing video on mouseclick?
body: <p>I have two videos, and I want to loop the first video until the user clicks the mouse, at which point I want to switch to playing the second video. Does anyone know what the best way to do this would be?</p>
  
  <p>Edit: Sorry, to clarify, I would prefer to use HTML 5 (assuming this is possible). I am trying to have the two videos swapped out seamlessly, one on top of another. I want it to look like clicking the mouse made the video finish or progress. So I need to pause/hide the first one and show/play the second one.</p>
  
  <p>Update: With Galen's help and some Google searches, I figured it out:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;script type="text/javascript"&gt;
  function swapVideos() {
      var video1 = document.getElementsByTagName('video')[0];
      video1.pause();
      video1.style.display = 'none';
      var video2 = document.getElementsByTagName('video')[1];
      video2.play();
  }
  &lt;/script&gt;
  &lt;body&gt;
  &lt;video src="video1.ogg" controls="controls" loop="loop" autoplay="autoplay" onclick="swapVideos();"&gt;
  your browser does not support the video tag
  &lt;/video&gt;
  &lt;video src="video2.ogg" controls="controls" preload="preload"&gt;
  your browser does not support the video tag
  &lt;/video&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>