title: How can I play/pause more than one video by mouseover
body: <p>I have a page with many videos and wish to play
   each video on <code>mouseOver</code> and pause on <code>mouseOut</code>.</p>
  
  <p>It is working with video1, but I want to work with video2 and so on.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;body&gt; 
  
  &lt;div style="text-align:center"&gt; 
    &lt;video id="video1" width="420" onmouseover="playPause()" onmouseout="playPause()"&gt;
      &lt;source src="mov_bbb.mp4" type="video/mp4"&gt;
      &lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
      Your browser does not support HTML5 video.
    &lt;/video&gt;
    &lt;video id="video2" width="420" onmouseover="playPause()" onmouseout="playPause()"&gt;
      &lt;source src="mov_bbb.mp4" type="video/mp4"&gt;
      &lt;source src="mov_bbb.ogg" type="video/ogg"&gt;
      Your browser does not support HTML5 video.
    &lt;/video&gt;
  &lt;/div&gt; 
  
  &lt;script&gt; 
  var myVideo=document.getElementById("video1"); 
  
  function playPause()
  { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
  } 
  &lt;/script&gt; 
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>