title: Play only one video at a time HTML5
body: <p>I'm using below code to play only one video at a time but it is not working properly. Please suggest.</p>
  
  <pre><code>document.getElementById("vid1").addEventListener('play', dimBack1, false);
  document.getElementById("vid2").addEventListener('play', dimBack2, false);
  document.getElementById("vid3").addEventListener('play', dimBack3, false);
  document.getElementById("vid4").addEventListener('play', dimBack4, false);
  document.getElementById("vid5").addEventListener('play', dimBack5, false);
  document.getElementById("vid6").addEventListener('play', dimBack6, false);
  
  
  function dimBack1() {
  document.getElementById("vid2").pause();
  document.getElementById("vid3").pause();
  document.getElementById("vid4").pause();
  document.getElementById("vid5").pause();
  document.getElementById("vid6").pause();
  document.getElementById("vid1").play();
  }
  function dimBack2() {
  document.getElementById("vid1").pause();
  document.getElementById("vid3").pause();
  document.getElementById("vid4").pause();
  document.getElementById("vid5").pause();
  document.getElementById("vid6").pause();
  document.getElementById("vid2").play();
  }
  function dimBack3() {
  document.getElementById("vid3").play();
  document.getElementById("vid1").pause();
  document.getElementById("vid2").pause();
  document.getElementById("vid4").pause();
  document.getElementById("vid5").pause();
  document.getElementById("vid6").pause();
  }
  function dimBack4() {
  document.getElementById("vid4").play();
  document.getElementById("vid1").pause();
  document.getElementById("vid2").pause();
  document.getElementById("vid3").pause();
  document.getElementById("vid5").pause();
  document.getElementById("vid6").pause();
  }
  function dimBack5() {
  document.getElementById("vid5").play();
  document.getElementById("vid1").pause();
  document.getElementById("vid2").pause();
  document.getElementById("vid3").pause();
  document.getElementById("vid4").pause();
  document.getElementById("vid6").pause();
  }
  function dimBack6() {
  document.getElementById("vid6").play();
  document.getElementById("vid1").pause();
  document.getElementById("vid2").pause();
  document.getElementById("vid3").pause();
  document.getElementById("vid4").pause();
  document.getElementById("vid5").pause();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The above code is live online at <a href="http://www.confesstalk.com/cl/test.html" rel="nofollow">http://www.confesstalk.com/cl/test.html</a></p>
  
  <p><strong>Main reequirement:</strong></p>
  
  <ol>
  <li>allow videos to load</li>
  <li>click first video</li>
  <li>click second video</li>
  <li>on clicking first video, pause first video.</li>
  <li>if i click another video i need code to pause second video</li>
  </ol>