title: How to get a video to pause, play another video, and resume to the original video
body: <p>I have two videos, I want the first video to play for 10 seconds, pause, play the second video, and when the second video has stopped, return to playing the first video from where it left off. Kind of like an advert/commercial.</p>
  
  <p>Currently I have two videos, that play sequentially, after the first one has completely ended. I know the solution is in the JavaScript event handler but the I can't seem to get it right.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="vidBox" id="contain"&gt;
  
    &lt;video id="video1" class="vid" muted controls="true" height="300" width="500"&gt;
        &lt;source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4"&gt;
    &lt;/video&gt;
  
    &lt;video id="video2" class="vid2" autoplay muted controls="true" style="display:none;" height="300" width="500"&gt;
      &lt;source src="http://jcath-drg.s3.amazonaws.com/BigBuck.m4v" type="video/mp4"&gt;
    &lt;/video&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var vid = document.getElementById('video1');
  vid.addEventListener("ended", hideVideo, false);
  
  function hideVideo() {
      var vid = document.getElementById('video1');
      var vid2 = document.getElementById('video2');
      vid.removeEventListener("ended", hideVideo, false);
      vid.style.display='none';
      vid2.style.display='block';
  }
  </code></pre>